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

Question

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

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

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

Here is a jsfiddle.

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

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

任何帮助将不胜感激...提前致谢！

Answer 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>

Answer 2

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

Here is a jsfiddle 表现与我最初预期的一样。

最终提示我的线索是 ngOptions 代码中的 this comment，它提醒我 "ngModel only watches for object identity change".

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

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

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

AngularJS: Why does $element.find('option') return an empty array when using ng-options?

javascript

angularjs

ng-options

jqlite