Angular属性指令 - 在current指令下添加ng-repeat

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>

我知道我可以使用jqLit​​e手动添加html，但是这个html无法访问指令范围。我不想将custom-directive指令从attribute指令转换为element指令的原因是因为它使得向基础模板元素添加id，name，required，disabled等属性变得更加困难（在本例中，为select元素）

编辑：这里要求的是如何在指令元素之后添加元素的示例：

{
  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等），那么您将需要使用$ compile服务来实现角度感知你的新DOM元素。在您的情况下，您将$ compile服务注入您的指令，然后像这样使用它：

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