Angular Attribut Richtlinie - fügen Sie eine ng-repeat unter dem aktuellen Richtlinie

Question

Wenn ich ein Attribut Direktive habe, zum Beispiel so etwas wie diese:

<select multiple ... ng-model="ctrl.model" custom-directive="ctrl.customModel" />

wo lassen sie sagen, dass ngModel und customModel Arrays sind. Gibt es einen Weg, ich kann innerhalb der Richtlinie Code ein Stück html unter die Direktiven Element, die Zugriff auf den Geltungsbereich der Richtlinie haben könnte und in der Lage, die beziehen, so dass es am Ende so etwas aussieht :

<select multiple ... ng-model="ctrl.model" custom-directive="ctrl.customModel" /> 
<div><!-- this code gets added by the custom-directive directive and uses it's scope --> 
    <span ng-repeat="item in customDirectiveCtrl.customModel" ng-bind="item.property"></span> 
</div> 

ich weiß, ich html manuell jqLite verwenden, aber diese html keinen Zugriff Umfang auf die Richtlinie hinzufügen können. Der Grund, warum ich die custom-directive-Direktive nicht von einer Attribut-Direktive in eine Elementrichtlinie konvertieren möchte, ist, dass es das Hinzufügen von Attributen wie id, name, required, disabled, ... zu den darunter liegenden Template-Elementen erschwert dieses Beispiel ein select Element)

EDIT: wie hier angefordert ein Beispiel dafür, wie ein Element nach dem Richtlinien-Element hinzuzufügen:

{ 
    restrict: 'A', 
    require: 'ngModel', 
    scope: { customModel: '=customDirective' }, 
    link: function(scope, element, attrs, ngModel) { 
    //element.after('<div></div>'); //this adds a div after the directives element 
    element.after('<div><span ng-repeat="item in customModel" ng-bind="item.property"></span></div>'); //this will add the html in the string, but will not interpret the angular directives within since (i assume) that it is not bound to any scope. 
    } 
} 

Jede Winkelkomponente/Richtlinie wie folgt hinzugefügt wird nicht funktionieren richtig oder überhaupt.

Answer 1

Wenn Sie in die Direktive neues HTML in die Seite einfügen und HTML für die Verwendung von eckigen Anweisungen (ng-repeat, ng-bind usw.) benötigen, müssen Sie den $ compile-Dienst verwenden, um angular zu machen Kenntnis Ihrer neuen DOM-Elemente. In Ihrem Fall würden Sie den Dienst $ compile in Ihre Anweisung einfügen und ihn dann wie folgt verwenden:

link: function(scope, element, attrs, ngModel) { 
     //create the new html 
     var newElement = angular.element('<div><span ng-repeat="item in customModel" ng-bind="item.property"></span></div>');  
     //compile it with the scope so angular will execute the directives used 
     $compile(newElement)(scope); //<-this is the scope in your link function so the "customModel" will be accessible. 
     //insert the HTML wherever you want it 
     element.after(newElement); 
}