AngularJS Manuellement Rendre Contrôleur et le Modèle

Question

Je suis en train de mettre en œuvre un système de plugin dans angularjs qui permettrait aux utilisateurs de configurer les "widgets" ils vont voir sur une certaine page. Chaque widget est définie par un contrôleur et d'un modèle(url). Est-il possible de créer une directive qui instancie un contrôleur, l'invoque avec un modèle et transcludes le contenu résultant?

L'objectif est quelque chose comme ceci:

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

Answer 1

Il y a deux façons de le faire; on utilise l'aide des directives déjà disponibles (comme ngInclude et ngController) et le deuxième est manuel, le manuel de la version peut - être plus vite, mais je ne peux pas en être sûr.

Le Moyen Le Plus Facile:

La méthode facile est simple de créer un nouvel élément avec ngController et ngInclude attributs, l'ajouter à la directive de l'élément, puis $compile elle:

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

La Méthode Manuelle:

Le manuel est de faire ce que ces directives ne font eux-mêmes à tour de rôle; cette logique est très similaire à ce que l' ngView n' (mais sans la complexité). Nous allons chercher le modèle, de le conserver en $templateCache, puis l'ajouter à la DOM. Nous créons un nouvel enfant, la portée et l'instanciation de la condition de contrôleur et de lui attribuer ce contrôleur à l'élément. Enfin, nous $compile elle:

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

(Notez qu'il n'est pas de collecte des ordures ici, dont vous aurez besoin pour mettre en œuvre si les widgets de changement)

Voici une Plunker démontrant les deux méthodes: http://plnkr.co/edit/C7x9C5JgUuT1yk0mBUmE?p=preview