AngularJS：為什么在使用ng-options時$ element.find（'option'）返回一個空數組？

Question

在Angular 1.4中，我使用ngOptions指令根據如下對象填充<select>標記和<option>標記：

{black: '#000000', red: '#FF0000', ...}

使用ng-options="value as key for (key, value) in vm.colors"這很好用，但是現在我想向與該鍵匹配的每個選項標簽中添加一個類（例如'.black'，'。red '）。 我的想法是簡單地找到option元素並使用addClass() ，但是我在獲取這些元素時遇到了麻煩。 （注意：我沒有使用jQuery，而是想避免為此添加它。）

這是一個jsfiddle。

我希望能夠將$element.find('option')的結果綁定到我的視圖模型，然后使用$scope.$watch('vm.options', function() {...})觀看它，但是當我將vm.options登錄到控制台時，我看到的只是一個空數組。

我在這里錯誤地使用$scope.$watch嗎？ $element有問題嗎？ 我的控制器無法訪問ngOptions范圍內的元素嗎？ 還是我只是犯了一個愚蠢的錯誤？

任何幫助將不勝感激...提前感謝！

Answer 1

文檔非常清楚，DOM操作只能在指令中完成。 我使用以下經驗法則：如果我發現自己想要或需要使用angular.element，則需要一個指令。

在這種情況下，可以使用內置的ngStyle指令：

 (function() { 'use strict'; var hexColors = { black : '#000000', red : '#FF0000', green : '#00FF00', blue : '#0000FF' }; angular.module('sandbox', []) .constant('hexColors', hexColors) .controller('SandboxController', SandboxController) ; function SandboxController($element, $scope) { var vm = this; vm.colors = hexColors; vm.selected = '#000000'; } })(); 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> <div ng-app="sandbox" ng-controller="SandboxController as vm"> <select ng-model="vm.selected" ng-options="value as key for (key, value) in vm.colors"></select> <p ng-style="{'background-color': vm.selected, color: 'white'}">Hex: {{ vm.selected }}</p> </div> 

Answer 2

好的，所以我試圖觀察返回option元素的函數的結果，但是我應該做的就是觀察返回length屬性的函數： $element.find('option').length 。

這是一個jsfiddle ，其行為與我最初預期的一樣。

最終放倒我送行的線索是這條評論中ngOptions代碼，這提醒了我，“ngModel只手表對象身份的轉變”。

這就回答了我的問題，但是正如@ jme11指出的那樣，您無法設置option元素的樣式，因此不會幫助我實現目標。

但是，這看起來可能像這樣： https : //github.com/angular-ui/ui-select