Question

我正在尝试编写一个属性指令，用于增强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指令完成？或者有更好的方法来实现这一目标吗？

Answer 1

您可以在指令中使用$ 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

Answer 2

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

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

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

2 个答案: