angularjs - page - navigationend angular 4

$ Compilar angular con controlador requerido

Question

Tengo una directiva de lista compuesta, es decir, un elemento de lista que puede ser una lista por sí mismo.
La directiva principal define el controlador:

.directive(''parent'', function() {
    controller: function($scope) {
    },
    link: function (scope, element, attrs) {
    }
})

La lista (de elementos) requiere el controlador principal, que por sí solo funciona bien (¿por qué no debería?):

.directive(''list'', function() {
     require: ''^parent'',
     link: function (scope, element, attrs, parentCtrl) {
     }
  })

Lo mismo ocurre con el elemento concreto, que también está bien:

.directive(''item'', function() {
    require: ''^parent'',
    link: function (scope, element, attrs, parentCtrl) {
    }
})

Un elemento puede ser un compuesto, en cuyo caso se crea una "lista". Esta composición se realiza mediante $ compilar (ing) un elemento de lista dentro de la función de enlace:

link: function (scope, element, attrs, parentCtrl) {
      ...
      $compile("<list></list>")(scope)
      ... 
}

Lo que arroja una excepción:
El controlador ''padre'', requerido por la directiva ''lista'', no se puede encontrar!

El motivo es obvio: la función $ compile no proporcionó el controlador y, por lo tanto, el requisito de "padre" no se puede resolver.
Y así he intentado proporcionar el controlador manualmente:

$compile("<list></list>")(scope, null, {''parent'': parentCtrl});

Lo que no produce una excepción pero aún no proporciona este controlador cuando es necesario.

¿Alguna idea de cómo hacer que la función $ compile acepte un controlador externo que también debería evaluarse?

Answer 1

Acabo de tener un problema similar, y la solución parece ser primero agregar el elemento al elemento principal y luego compilarlo.

.directive(''item'', function($compile) {
  return {
    template:''<li><a ng-click="addSubList()">Create Another List</a></li>'',
    require: ''^parent'',
    replace: true,
    link: function(scope, element, attrs, parentCtrl) {

      scope.addSubList = function() {
        var sublist = angular.element(''<ul list>'');
        element.find(''a'').append(sublist);
        $compile(sublist)(scope);
      };

    }
  };
});

Ver este Plunker: http://plnkr.co/edit/dASASrFbtXSMCRZKRAj5?p=preview

Answer 2

Para futuras referencias, aquí está la solución:

En la función $ compile, el controlador requerido se puede pasar como el controlador transcluido:

$compile(template)(scope, undefined, {transcludeControllers: injectedCtrl})

Donde "injectedCtrl" es el objeto que enumera los controladores que espera la directiva, por ejemplo, si require: ''^dad'' , entonces transcludeControllers verá así:

 transcludeControllers: {
        dad: { //name of controller in ''require'' statement
          instance: vm //instance of controller
        }
      }

Vea este ejemplo: https://jsfiddle.net/qq4gqn6t/11/

¡Eso es!

Answer 3

$compile(angular.element("< list>< /list >"))(scope)