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