Dynamic 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's）之前执行。对于这一点，不要手动编译，但执行的指令的编译功能：

.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表示法来消除此类问题。

你也不想在指令链接函数中设置项目，但我想这只是为了演示的目的，你应该将它移动到控制器。

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