Załaduj szablon AngularJS na stronie dynamicznie

Question

Mam stronę zawierającą 2 kontrolery: jedną, która zarządza listą tak zwanych "aplikacji", a drugą, która umieszcza nowy szablon kątowy w innerHTML elementu Div.

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

Próbowałem przy użyciu standardowych {{wyrażenie}} powiązania, ale nie działają z html, ja też próbowałem NG-bind-html-niebezpieczne dyrektywy (Binding innerHTML porównywalny z App żądanie powrotu), ale kontrolery nie są wykonywane w ramach tego nowego kodu.

Problem polega na tym, że stosując wiązanie, Angular nie przerabia zawartości danego html, aby użyć go jako aplikacji kątowej. Jakieś pomysły, jak zdobyć je do analizy zawartości dynamicznej?

Answer 1

Spójrz na module uiRouter (od projektu AngularUI). Dodaje pojęcie stanów, które są bardzo podobne do tras, ale z innymi dodatkami, takimi jak możliwość ich zagnieżdżania. Na przykład:

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

MySubCtrl zostanie aktywowany, gdy idziesz do /mystate/something i można go używać to „coś” jako parametr (patrz $stateParams). Możesz zagnieździć stany do dowolnej ilości poziomów.

Answer 2

Wygląda na to, że usługa $ compile, po wprowadzeniu elementów, które chcesz przekompilować wraz z bieżącym zasięgiem, robi to, czego szukałem.

Przykład z mojego źródła:

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. 

To powinno pomóc ktoś przeżywa mój problem, mam nadzieję.

Answer 3

Spójrz na $routes i ngView w angularjs.

Oto bardzo prosty przykład:

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