AngularJS - динамически созданная директива «требует» не работает

Question

Опция «require» не работает, если директива динамически создана, поэтому она не может ссылаться на контроллеры своих родителей. Как я могу заставить его работать?

app.directive('parent', function ($compile) { 
    return { 
    controller: function() {}, 
    link: function (scope, el, attrs) { 
     // "child" is dynamically created 
     el.append($compile('<div child>')(scope)); 
    } 
    } 
}) 

.directive('child', function() { 
    return { 
    require: "?^parent", 
    link: function(scope, el, attrs, pCtrl) { 
     // "child" cannot find its parent controller 
     console.log("pCtrl is undefined: ", pCtrl); 
    } 
    } 
}) 

вот plunker DEMO

Answer 1

вам нужно добавить дочерний элемент родительского элемента перед компиляцией его.

Когда директива компилируется, ее попытки получить свой родительский элемент. А из родительского элемента он пытается найти родительский контроллер. Но вы компилируете свою дочернюю директиву перед добавлением ее элемента в свой родительский элемент.

Я создал для вас plnkr. Оформить заказ this

app.directive('parent1', function($compile, $timeout) { 
    return { 
    controller: function() { 
     this.name = 'parent controller 1'; 
    }, 
    link: function(scope, el, attrs) { 
     // "child1" is dynamically created 
    var elmChild = angular.element('<div child1>'); 
     el.append(elmChild); 
     $compile(elmChild)(scope); 
    } 
    } 
})