如何访问Angular选择元素的选项?

时间:2013-05-15 12:37:55

标签: javascript angularjs

我正在尝试编写一个属性指令,用于增强select元素。作为此增强功能的一部分,我需要访问option元素的select子元素(因此我希望能够在link函数中访问它们。)

例如,这是一个非常基本的模板:

<div ng-app="test" ng-controller="TestCtrl">
    <select ng-model="selected" ng-options="i for i in data" enhanced></select>
</div>

一个非常基本的控制器:

var t = angular.module("test", []);
t.controller("TestCtrl", function ($scope) {
    $scope.data = [
        "One",
        "Two",
        "Three"
    ];
    $scope.selected = $scope.data[0];
});

最后是一个非常基本的指令:

t.directive("enhanced", function () {
    return function ($scope, $element) {
        console.log($element.find("option").length); // Always 0
    };
});

这是一个包含完整示例的fiddle

问题是在link函数内部,ng-options指令尚未执行且select元素仍为空。有没有办法可以推迟执行我的指令,直到ng-options指令完成?或者有更好的方法来实现这一目标吗?

2 个答案:

答案 0 :(得分:3)

您可以在指令中使用$ timeout。

t.directive("enhanced", function ($timeout) {
    return function ($scope, $element) {
        $timeout(function(){
            console.log($element.find("option").length); // 3
        })
    };
});

这是fiddle

另一种选择是使用观察者:

t.directive("enhanced", function () {
    return function ($scope, $element) {
        $scope.$watch('selected', function () {
            console.log($element.find("option").length); // 3
        });
    };
});

这种方法的唯一问题是,它会在表达式发生变化的任何时候运行,因此您必须在第一次之后取消监视。

这是fiddle

答案 1 :(得分:0)

$scope.$watch语句中的选项为currently rendered。因此,无法查看link函数中的选项列表,因为稍后将调用watch

在此之前内省选项列表的唯一方法是自己解析attr.ngOptions并在需要时获取列表。