javascript - Angular 属性指令 - 在当前指令下方添加 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.
  }
}

像这样添加的任何 Angular 组件/指令都将无法正常工作或根本无法工作。

Answer 1

如果您要在指令中将新的 HTML 注入(inject)到页面中，并且需要该 HTML 来使用 Angular 指令(ng-repeat、ng-bind 等)，那么您将需要使用 $compile 服务来使 Angular 感知新 DOM 元素的数量。在您的情况下，您可以将 $compile 服务注入(inject)您的指令中，然后像这样使用它:

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