我正在尝试编写一个属性指令,用于增强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
指令完成?或者有更好的方法来实现这一目标吗?
答案 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
并在需要时获取列表。