AngularJS：为什么在使用 ng-options 时 $element.find('option') 返回一个空数组？答案

【问题标题】：AngularJS: Why does $element.find('option') return an empty array when using ng-options?AngularJS：为什么在使用 ng-options 时 $element.find('option') 返回一个空数组？
【发布时间】：2015-09-04 22:51:57
【问题描述】：

在 Angular 1.4 中，我使用 ngOptions 指令基于如下所示的对象使用 <option> 标签填充 <select> 标签：

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

使用ng-options="value as key for (key, value) in vm.colors" 效果很好，但现在我想为每个与键匹配的选项标签添加一个类（例如'.black'、'.red'）。我的想法是简单地找到option 元素并使用addClass()，但我无法获取这些元素。（注意：我没有使用 jQuery，并且希望避免为此添加它。）

Here is a jsfiddle.

我希望能够将$element.find('option') 的结果绑定到我的视图模型，然后使用$scope.$watch('vm.options', function() {...}) 观看它，但是当我将vm.options 登录到控制台时，我看到的只是一个空数组。

我在这里错误地使用了$scope.$watch 吗？ $element 有问题吗？我的控制器是否无法访问ngOptions 范围内的元素？还是我只是犯了一个愚蠢的错误？

任何帮助将不胜感激...在此先感谢！

【问题讨论】：

你为什么不尝试使用 ng-class 而不是使用 $element.select？并且使用手表总是不是一个好策略。它可能会减慢您的应用程序
我同意不想使用 $watch，这正是我的故障排除导致我的地方。你能举例说明在这种情况下如何使用 ngClass 吗？
我不确定，但根据源代码中的这条评论，我认为这个问题是 jqLite 特有的：github.com/angular/angular.js/blob/v1.4.0/src/ng/directive/…
这绝对是一个绑定问题，我的选项变量在摘要期间没有触发更新。在我原来的 jsfiddle 的这个分支中，我可以使用带有 ngClick 的按钮获取选项：jsfiddle.net/sscovil/x1bh3jmL

标签： javascript angularjs ng-options jqlite

【解决方案1】：

docs 非常清楚 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>

【讨论】：

感谢您的回复。我知道何时使用指令，但我实际上想要做的是修改 ngOptions 指令的输出......无论我尝试从控制器还是其他指令执行它，结果都是一样的。不幸的是，我不能使用 ngStyle，因为我不想在我的标记中设置元素的样式。相反，我正在尝试设置 ngOptions 正在创建的选项标签的样式。
我正在尝试根据 hexColor 对象中的相应键将一个类应用于每个选项标签。更具体地说，我想应用一个等于该值的背景颜色，所以我猜样式可以工作——但我不想为对象中的每种颜色手动编写 CSS 规则。此外，我想了解为什么这没有按预期工作。
我的问题更多是关于实用方面的。您无法在选择中设置样式选项，那么为什么要尝试向其中添加类。我想如果您愿意，您可以这样做的唯一方法是不使用 ngOptions 并构建自己的指令来附加选项。
我最初的想法是使用 :before CSS 选择器在标签前面加上一个颜色方块，但我还没有达到我可能已经意识到你不能在下拉列表中设置项目样式的地步因为我被 $watch'ing 时看不到选项元素的问题所困扰。

【解决方案2】：

好的，所以我试图查看返回 option 元素的函数的结果，但我应该做的是查看返回 length 属性的函数：$element.find('option').length。

Here is a jsfiddle 的行为与我最初预期的一样。

最终提示我的线索是ngOptions 代码中的this comment，它提醒我“ngModel 只监视对象身份更改”。

这回答了我的问题，但正如 @jme11 指出的那样，您不能设置 option 元素的样式，因此它无助于我实现目标。

但是，这看起来可能是：https://github.com/angular-ui/ui-select

【讨论】：