carico AngularJS Template all'interno della pagina, in modo dinamico

Ho una pagina contenente 2 regolatori: uno che gestisce un elenco di cosiddetti 'apps', e un altro che è quello di collocare il nuovo modello angolare nella innerHTML del suo elemento Div.carico AngularJS Template all'interno della pagina, in modo dinamico

<div ng-controller="appList"></div> 
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>

Ho provato con i normali {{espressione}} attacchi, ma non funzionano con html, ho anche provato il ng-bind-html-non sicuro direttiva (Binding l'innerHTML a quella di App richiesta di reso) ma i controller non vengono eseguiti all'interno di questo nuovo codice.

Il problema sembra essere che utilizzando un Binding, angolare non è ri-analisi del contenuto della html in questione per usarlo come app angolare. Qualche idea su come ottenerlo per analizzare i contenuti dinamici?

fonte

2012-07-03 Zoey

Le app "Angolari" distinte delle app (ognuna con una dichiarazione 'ng-app'?) O solo diversi controller/viste per la stessa app? Se ci sono solo diversi controller/vista, userei l'appList come navigatore e setup '$ routeProviders' (http://docs.angularjs.org/api/ng.$routeProvider) per gestire le diverse visualizzazioni. –

Probabilmente una soluzione migliore rispetto a quella che stavo tentando, ma sono ancora nuovo per Angular, quindi proverò. Grazie. – Zoey

Date un'occhiata al modulo uiRouter (dal progetto AngularUI). Aggiunge il concetto di stati, che sono piuttosto simili ai percorsi, ma con altri oggetti, come la possibilità di annidarli. Per esempio:

$stateProvider 
    .state('myState', { 
     url: '/mystate', 
     templateUrl: '...', 
     controller: 'MyCtrl' 
    }) 
    .state('myState.substate', { 
     url: '/{substate}', 
     templateUrl: '...', 
     controller: 'MySubCtrl' 
    });

MySubCtrl sarà attivato ogni volta che si va a /mystate/something ed è possibile utilizzare quel "qualcosa" come parametro (vedi $stateParams). Puoi annidare gli stati a qualsiasi livello di livelli.

fonte

2014-02-04 00:49:03

Sembra davvero utile! Essendo che la mia risposta proveniva dal primo sviluppo di Angular, questo non era esistito- Altri si sentono liberi di commentare se questo non dovrebbe essere il caso, ma sento che questa è ora la risposta corretta. Accettato. – Zoey

Sono felice che queste cose (l'ecosistema di AngularJS) si stiano evolvendo come sono. –

Per la cronaca, ho provato questa soluzione nei miei progetti ed è estremamente utile. Ci sono alcuni problemi, come la navigazione verso rotte inesistenti che causano errori, ma scommetto che nascosto nella loro documentazione di profondità moderata è un mezzo per rilevare quando una rotta non esiste in modo tale da poter essere gestita. Come scenario generale, raccomando questa soluzione a chiunque tenti di utilizzare percorsi, e consiglio di saltare il fornitore ufficiale di Route da Angular, in quanto questo è molto più potente. – Zoey

Sembra che il servizio di compilazione $, se somministrate gli elementi che si desidera ricompilare con il vostro ambito corrente, fa quello che stavo cercando.

Esempio dalla mia fonte:

var appPane = $('#AppPane');//JQuery request for the app pane element. 
appPane.html(data);//The dynamically loaded data 
$compile(appPane.contents())($scope);//Tells Angular to recompile the contents of the app pane.

Questo dovrebbe aiutare chiunque vivendo il mio problema, spero.

fonte

2012-07-03 20:43:20 Zoey

Guardate $routes e ngView in angularjs.

Ecco un esempio molto semplice:

http://jsfiddle.net/pXpja/3/

fonte

2012-07-21 14:11:42 bearfriend

Questa è l'alternativa "ufficiale", ma al momento non funziona in situazioni che richiedono una struttura a livelli di controller come nel mio problema originale. – Zoey

carico AngularJS Template all'interno della pagina, in modo dinamico

risposta

Problemi correlati