Wie Element in Post-Funktion der Kompilierung anhängen - AngularJS

Question

Also, das ist mein Problem. Ich habe zwei Richtlinien (zB Mutter Richtlinie und Kind-Richtlinie) und ich rufe Kind Richtlinie von den Eltern Richtlinie wie folgt aus:

angular.module('components', []) 
    .directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     compile: function(element, attrs) { 
       var x = '<directive2></directive2>'; 
       element.append(x); 
     } 
    } 
    }) 
    .directive("directive2", function($compile, $parse) { 
     return { 
     restrict: 'E', 
     compile: function(iElement, iAttrs, transclude) { 
      iElement.append('<p>directive2</p>'); 
     } 
     } 
    }); 

angular.module('HelloApp', ['components']) 

Dies funktioniert gut. Aber jetzt schreibe ich eine Bedingung in der Post-Funktion des Kompilierens und wenn diese Bedingung erfüllt, sollte die Kind-Anweisung anhängen.

Ich habe gerade die Append-Funktion in der Post-Funktion hinzugefügt, aber es funktioniert nicht.

angular.module('components', []) 
.directive('helloWorld', function() { 
    return { 
    restrict: 'E', 
    compile: function(element, attrs) { 
     return { 
     post: function(scope, element, attrs) { 
     var x = '<directive2></directive2>'; 
     element.append(x); 
     } 
    } 
    } 
    } 
}) 
.directive("directive2", function($compile, $parse) { 
return { 
    restrict: 'E', 
    compile: function(iElement, iAttrs, transclude) { 
    iElement.append('<p>directive2</p>'); 
    } 
    } 
}); 

angular.module('HelloApp', ['components']) 

Ich weiß nicht, was schief gelaufen ist. Führe mich Freunde

jsFiddle

Answer 1

Sie müssen den $compile Service nutzen, bevor wie unten angehängt:

angular.module('components', []) 
    .directive('helloWorld', function($compile){ 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
     var x = angular.element('<directive2></directive2>'); 
     element.append($compile(x)(scope)); 
     } 
    } 
    }) 
    .directive("directive2", function() { 
    return { 
     restrict: 'E', 
     compile: function(element, attrs, transclude) { 
     element.append('<p>directive2</p>'); 
     } 
    } 
    }); 

angular.module('HelloApp', ['components']); 

http://jsfiddle.net/2zbabkjb/2/

Answer 2

Try-Vorlage auf Ihre erste Richtlinie zu definieren:

angular.module('components', []) 
.directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     template: '<directive2></directive2>' 
    } 
    } 
})