since property known isn angularjs angularjs-directive

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>