1

我正在尝试编写一个用于增强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
    };
});

这是一个包含完整示例的小提琴。

问题是在link函数内部，ng-options指令还没有执行，select元素仍然是空的。有没有办法可以推迟我的指令的执行，直到ng-options指令完成？还是有更好的方法来实现这一目标？

4

2 回答 2

3

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

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

这是一个小提琴

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

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

这种方法的唯一问题是它会在表达式更改时运行，因此您必须在第一次之后取消观察。

这是一个小提琴

于 2013-05-15T12:47:12.667 回答
0

这些选项当前呈现在一个$scope.$watch语句中。因此无法查看link函数中的选项列表，因为watch稍后会调用。

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

于 2013-05-15T15:57:44.480 回答