AngularJS Render Controller e Template

Question

Sto cercando di implementare un sistema di plugin in angularjs che consentirebbe agli utenti di configurare quali "widget" vedranno su una determinata pagina. Ogni widget è definito da un controller e un modello (url). È possibile creare una direttiva che crea un'istanza di un controller, la invoca con un modello e include il contenuto risultante?

L'obiettivo è qualcosa di simile:

<div class="widget" ng-repeat="widget in widgets"> 
    <widget controller="widget.controller" templateUrl="widget.templateUrl"></widget> 
</div> 

Answer 1

Ci sono due modi per farlo; uno usa le direttive helper già disponibili (come ngInclude e ngController) e il secondo è manuale; la versione manuale potrebbe essere essere più veloce, ma non posso essere sicuro.

Il modo semplice:

Il metodo più semplice è quello semplice creare un nuovo elemento con ngController e ngInclude attributi, aggiungerlo alla elemento della direttiva, e quindi $compile esso:

var html = '<div ng-controller="'+ctrl+'" ng-include="'+tpl+'"></div>'; 
element.append(html); 
$compile(element.contents())(scope); 

The Manual Way:

Il modo manuale è quello di fare ciò che queste direttive si farebbero da soli fare a turno; questa logica è molto simile a ciò che fa ngView (sebbene senza la complessità). Preleviamo il modello, lo memorizziamo in $templateCache e quindi lo aggiungiamo al DOM. Creiamo un nuovo ambito figlio e istanziamo il controller fornito con esso e assegniamo quel controller all'elemento. Infine, $compile esso:

$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); 
}); 

(Si noti che non v'è alcuna raccolta dei rifiuti qui, che si avrebbe bisogno di attuare, se i widget cambiano)

Ecco un Plunker dimostrando entrambi i metodi: http://plnkr.co/edit/C7x9C5JgUuT1yk0mBUmE?p=preview