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