javascript - 动态 AngularJS 指令

Question

我正在尝试动态插入 ng-options里面的指令 <select>我的应用程序中的元素，它们都有自己的类名和其他指令(如 ng-if 等)。

<div ng-app="app" ng-controller="ctrl">
  <select ng-model="model" class="myClass" ng-if="condition || true" my-directive>
  </select>
  <pre>{{ model | json }}</pre>
</div>

<小时/>

angular
.module('app', [])
.directive('myDirective', function($compile) {
  return {
    restrict: 'A',
    scope: false,
    link: function($scope, $elem, $attr) {
      $scope.items = [{ label: "foo", value: "foofoo"},
                      { label: "bar", value: "barbar"}];
      $elem.removeAttr('my-directive'); // Prevents infinite loop
      $elem.attr('ng-options', 'item as item.label for item in items');
      $compile($elem)($scope);
    }
  }
})
.controller('ctrl', function($scope) {
  $scope.model = null;
  $scope.$watch('model', function(val) { console.log('•', val) });
});

Codepen

这个想法是 my-directive应替换为 ng-options并且该元素在应用到它的所有其他指令时仍应表现得像正常情况一样。

我不明白为什么ng-model不会更新，因为指令的范围是父范围( scope: false )。我尝试在 compile 中进行 DOM 修改指令的步骤，但是 $scope.items变得未知，下拉列表甚至没有填充。

Answer 1

您的主要问题是您需要为指令设置非常高的优先级，以使其编译函数在 ngModel 的编译函数之前执行(以及 ngIf 的编译函数)。为此，不要手动编译，而是实现指令的编译功能:

.directive('myDirective', function($compile) {
    return {
      priority: 10000,
      terminal: true,
      link: function(scope, element) {
        element.attr('ng-options', 'item as item.label for item in items').removeAttr('my-directive');
        $compile(element)(scope);
      }
    }
  })

您还需要记住，如果您使用创建新作用域的指令(例如 ngIf、ngInclude 等)，则当模型不会更新时，您可能会出现意外行为，因为 Angular 会将值写入子作用域模型中。在您的演示中，我使用 $parent 显式引用正确的范围，但最好使用controllerAs 表示法来消除此类问题。

您也不想在指令链接函数中设置项目，但我想这只是出于演示目的，您应该将其移动到 Controller 。

演示: http://codepen.io/anon/pen/KVwQYr?editors=101