渲染后如何执行指令代码? [英] How do you execute directive code after rendering?
问题描述
我正在尝试构建一个指令,该指令在嵌套的 ng-repeat
完成渲染后运行.这是我尝试过的(fiddle):
HTML:
<ul my-directive><li ng-repeat="动物中的动物">{{animal}}</li>
还有 JavaScript:
angular.module("MyApp", []).directive("myDirective", function () {返回函数(范围,元素,属性){警报(元素.查找(li").长度);//0};});函数 MyCtrl($scope) {$scope.animals = ["狗", "猫", "大象"];}
我的自定义指令中的链接函数在所有 元素被渲染之前运行(并且
0
被警告).ng-repeat
完成渲染后如何运行代码?
你可以在 ng-repeat 中移动指令,http://jsfiddle.net/ZTMex/3/
<ul><li ng-repeat="动物中的动物" my-directive>{{animal}}</li>
或查看与您的问题.
I'm trying to build a directive that runs after a nested ng-repeat
has completed rendering. Here's what I've tried (fiddle):
The HTML:
<div ng-app="MyApp" ng-controller="MyCtrl">
<ul my-directive>
<li ng-repeat="animal in animals">{{animal}}</li>
</ul>
</div>
And the JavaScript:
angular.module("MyApp", [])
.directive("myDirective", function () {
return function(scope, element, attrs) {
alert(element.find("li").length); // 0
};
});
function MyCtrl($scope) {
$scope.animals = ["Dog", "Cat", "Elephant"];
}
The linking function in my custom directive runs before all of the <li>
elements have been rendered (and 0
is alerted). How do I run code after the ng-repeat
has completed rendering?
You could move the directive inside ng-repeat, http://jsfiddle.net/ZTMex/3/
<div ng-app="MyApp" ng-controller="MyCtrl">
<ul>
<li ng-repeat="animal in animals" my-directive>{{animal}}</li>
</ul>
</div>
Or have a look at https://stackoverflow.com/a/13472605/1986890 which is related to your question.
这篇关于渲染后如何执行指令代码?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!