директивы Угловой атрибут - добавить нг-повторение ниже текущей директивы

Question

Если бы я имел директиву атрибута, например, что-то вроде этого:

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

, где, скажем, что ngModel и customModel массив. Есть ли способ, который я могу, в коде директивы, добавить элемент html ниже элемент директив, который может иметь доступ к области действия директивы и иметь возможность ссылаться на customModel, так что в конце он выглядит примерно так: :

<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> 

Я знаю, что могу добавить HTML вручную с помощью jqLite, однако этот HTML не имеет доступа к Директиве объема. Причина, по которой я не хочу преобразовывать директиву custom-directive из директивы атрибута в директиву элемента, заключается в том, что сложнее добавить такие атрибуты, как id, name, required, disabled, ... в базовые элементы шаблона (в случае в этом примере, select элемент)

EDIT: в соответствии с просьбой, вот пример того, как добавить элемент после директивы элемента:

{ 
    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. 
    } 
} 

Любой угловой компонент/директива добавлена ​​как это не будет работать правильно или вообще.

Answer 1

Если вы вводите новый HTML-код в страницу своей директивы, и вам нужен этот HTML-код для использования угловых директив (ng-repeat, ng-bind и т. Д.), Тогда вам нужно будет использовать службу компиляции $, чтобы сделать угловую осознавая ваши новые элементы DOM. В вашем случае вы должны ввести услугу компиляции $ в свою директиву, а затем использовать ее следующим образом:

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