angularjs - property - angular material

AngularJS Manualmente Render controlador y plantilla

Question

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>

Answer 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