angularjs - property - angular material
AngularJS Manualmente Render controlador y plantilla (1)
Hay dos maneras de hacer esto; uno usa las directivas de ayuda ya disponibles (como ngInclude
y ngController
) y el segundo es manual; la versión manual puede ser más rápida, pero no estoy seguro.
La manera fácil:
El método fácil es crear un nuevo elemento con los ngController
y ngInclude
, anexarlo al elemento de la directiva y luego $compile
:
var html = ''<div ng-controller="''+ctrl+''" ng-include="''+tpl+''"></div>'';
element.append(html);
$compile( element.contents() )( scope );
La forma manual:
La manera manual es hacer lo que estas directivas harían a su vez; esta lógica es muy similar a lo que hace ngView
(aunque sin la complejidad). Buscamos la plantilla, la almacenamos en $templateCache
y luego la agregamos al DOM. Creamos un nuevo ámbito hijo e instanciamos el controlador proporcionado con él y asignamos ese controlador al elemento. Finalmente, lo $compile
:
$http.get( tpl, { cache: $templateCache } )
.then( function( response ) {
templateScope = scope.$new();
templateCtrl = $controller( ctrl, { $scope: templateScope } );
element.html( response.data );
element.children().data(''$ngControllerController'', templateCtrl);
$compile( element.contents() )( templateScope );
});
(Tenga en cuenta que aquí no hay recolección de basura, que debería implementar si cambian los widgets)
Aquí hay un Plunker que demuestra ambos métodos: http://plnkr.co/edit/C7x9C5JgUuT1yk0mBUmE?p=preview
Estoy intentando implementar un sistema de complementos en angularjs que permita a los usuarios configurar qué "widgets" verán en una página determinada. Cada widget está definido por un controlador y una plantilla (url). ¿Es posible crear una directiva que instancia un controlador, lo invoca con una plantilla y transcluye el contenido resultante?
El objetivo es algo como esto:
<div class="widget" ng-repeat="widget in widgets">
<widget controller="widget.controller" templateUrl="widget.templateUrl"></widget>
</div>