javascript - 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，并且希望避免为此添加它。)

Here is a jsfiddle.

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

我正在使用$scope.$watch这里写错了？是 $element 的问题吗？ ？元素是否在ngOptions范围内我的 Controller 无法访问？或者我只是犯了一个愚蠢的错误？

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

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>