Cargar plantilla AngularJS dentro de la página, dinámicamente

Question

Tengo una página que contiene 2 controladores: uno que administra una lista de las llamadas 'aplicaciones', y otro que es colocar la nueva plantilla angular en el innerHTML de su elemento Div.

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

He intentado usar los estándares {{expresión}} atascamientos, pero no trabajar con html, también he probado el ng-bind-html-insegura Directiva (Enlazar el innerHTML al de la App devolución de la solicitud), pero los controladores no se ejecutan dentro de este nuevo código.

El problema parece ser que al usar una vinculación, Angular no vuelve a analizar el contenido del html en cuestión para utilizarlo como una aplicación angular. ¿Alguna idea de cómo lograr analizar contenido dinámico?

Answer 1

Tome una mirada en el módulo de uiRouter (del proyecto AngularUI). Agrega el concepto de estados, que son bastante similares a las rutas, pero con otras ventajas, como la capacidad de anidarlas. Por ejemplo:

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

MySubCtrl se activará cada vez que vaya a /mystate/something y puede utilizar ese "algo" como un parámetro (ver $stateParams). Puede anidar estados en cualquier cantidad de niveles.

Answer 2

Parece que el servicio $ compile, cuando se alimenta con los elementos que desea recompilar junto con su alcance actual, hace lo que estaba buscando.

Ejemplo de mi fuente:

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. 

Esto debería ayudar a cualquier persona que experimenta mi problema, espero.

Answer 3

Mire $routes y ngView en angularjs.

Aquí hay un ejemplo muy básico:

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