Utilizzo di AngularJS con innerHTML

Possiedo alcuni elementi di AngularJS che contengono una serie di matrici e dati. Una volta che un utente carica un file, il file viene analizzato e salvato nell'ambito con i suoi diversi array. Tuttavia, dopo tutto questo e il file è contenuto nell'ambito, cerco di aggiornare il innerHTML, ma il codice AngularJS non funziona. Io uso ng-repeat per creare una tabella basata sugli array, ma rimane una singola cella con contenuti simili a {{column}} e simili.Utilizzo di AngularJS con innerHTML

ho avuto estrema difficoltà usando le direttive e modelli perché il mio index.html dice che app e module, ecc, sono indefiniti quando faccio qualcosa come app.directive(...

Le parti significative del mio file index.html includono:

<html ng-app> 
... //once a file is uploaded, total.js is called; 
//this was so the app didn't try to run before a file was uploaded 
<div id="someStuff">This will become a table once a file is uploaded</div>

Questo è un semplice esempio di come il mio campo di applicazione è impostato in total.js:

function sheet($rootScope, $parse){ 
    $rootScope.stuff = text; 
//text is a variable that contains the file's contents as a string 
}; 

document.getElementById('someStuff').innerHTML="<div ng-controller='sheet'>{{stuff}}</div>";

L'HTML cambia ma, invece di stampare il contenuto del file, stampa solo {{stuff}}. Come posso ottenere che innerHTML capisca che contiene AngularJS, preferibilmente senza usare un partial o una direttiva, a meno che non si possa spiegare a fondo dove l'avrei inserito e la sintassi di esso.

Modifica 1: Ho provato a utilizzare $ compile ma è contrassegnato come non definito. Ho esaminato lo this per capire il problema della compilazione, ma non capisco la sintassi di rtcherry e come dovrei applicarla al mio codice.

Edit 2: Ho continuare a ricevere $ errori di compilazione non definite quando includo in questo modo:

function sheet($rootScope, $parse, $compile){...}; 
document.getElementById('someStuff').innerHTML=$compile("<div ng-controller='sheet'> 
{{stuff}}</div>")(scope);

Edit 3: Mentre l'itcouldevenbeaboat commento era estremamente scortese, ho deciso che dovrei forse spettacolo tu il modo in cui ho tentato di farlo.

ho inserito questo codice sotto la mia funzione di foglio:

var app = angular.module('App', []); 
app.directive('spreadsheeet', function($compile){ 
    return{ 
     templateUrl: innerHTML.html 
    } 
});

Dove innerHTML contiene <div ng-controller='sheet'>{{stuff}}</div> e index.html Ho incluso <div spreadsheet></div>

Con questo, ricevo nessun errore, ma il testo non non compare, né come {{stuff}} né come contenuto del file. Anche quando faccio qualcosa di semplice, come ad esempio fornire template: "<h2>Hello!</h2>" anziché templateUrl, non riesco a ottenere Hello! per stampare.

fonte

2013-07-15 user2494584

innerHTML = $ compilare ("

") (campo di applicazione) –

si può inj ect $ compilare come altri servizi/strumenti angolari. Proprio come vorresti usare $ scope o $ rootScope. – alfrescian

Ricevo ancora errori. Si prega di vedere la mia ultima modifica. – user2494584

funziona per me

document.getElementById('someStuff').innerHTML = "<div ng-controller='sheet'>{{stuff}}</div>"; 
$compile(document.getElementById('someStuff'))($scope);

fonte

2014-10-21 23:33:31 Mher

soluzione semplice (che funzionerà al 100%):

controller, non dimenticate di iniettare $ documento in regolatore come dipendenza, in questo modo:

App.controller('indiaController', function ($scope, $document,$filter, $location) { 

    var text_element = angular.element($document[0].querySelector('#delhi'); 
    text_element.html('your dynamic html placed here'); 
}

fonte

2018-02-05 18:18:12 ngCourse

Utilizzo di AngularJS con innerHTML

risposta

Problemi correlati