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

angular change title of page

Question

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

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

He intentado usar los enlaces estándar {{expresión}}, pero no funcionan con html, también he probado la directiva ng-bind-html-unsafe (vinculando el innerhtml con el de la devolución de la solicitud de la aplicación) pero los controladores no Ejecutado dentro de este nuevo código.

El problema parece ser que al usar un Enlace, Angular no es volver a analizar el contenido del html en cuestión para usarlo como una aplicación angular. ¿Alguna idea de cómo lograr que se analice el contenido dinámico?

Answer 1

Eche un vistazo al módulo uiRouter (del proyecto AngularUI ). Agrega el concepto de estados, que son bastante similares a las rutas, pero con otras golosinas, 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 podrá usar ese "algo" como parámetro (consulte $stateParams ). Puedes anidar estados a cualquier cantidad de niveles.

Answer 2

Mira $routes y ngView en angularjs.

Aquí hay un ejemplo muy básico:

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

Answer 3

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 cualquiera que esté experimentando mi problema, espero.