javascript - 在替换 ng-repeat 之前调用自定义指令链接函数

Question

我有以下指令:

.directive("picSwitcher", ["$timeout", function($timeout){
return {
    restrict: "A",
    scope: {
        pics: "=",
        fadeTime: "@",
        timeForPic:"@"
    },
    template: '<img ng-repeat="pic in pics" src="{{pic.url}}" style="display: none"/>',
    link:   function ($scope, element){
                //some code...
                $(element.find("img")[0]).css({display: "block"});
            }
};
}])

我的问题是，当我的链接函数被调用时 - ng repeat 尚未“编译”(这里应该使用什么词而不是编译？)

所以我正在尝试设置 undefined.. 的 css我怎样才能在 ng-repeat 完成后强制运行链接功能？!

现在我通过将 $(element.find("img")[0]).css({display: "block"}); 替换为 $timeout 来解决这个问题(功能(){
$(element.find("img")[0]).css({display: "block"});}, 200);

但这感觉很“hacky”

为了更轻松地实现我的目标，我是否缺少某些东西？一般来说，在自定义指令的链接函数内操作 ng-repeat dom 元素的最佳方法是什么？

谢谢，吉米。

Answer 1

你可以检查$scope.$evalAsync

$scope.$evalAsync(function(){
    $(element.find("img")[0]).css({display: "block"});
}

这将使函数在 dom 渲染之后执行。

此外，如果您将延迟设置为 0，使用 $timeout 并不是一个坏主意

$timeout(function(){
    $(element.find("img")[0]).css({display: "block"});}, 
0);

我认为也会达到目的。

更多引用http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm