Javascript AngularJS-在ng repeat完成后操作DOM

在遍历数据之后，我遇到了一些有关DOM操作的问题

我们有一个jQuery slider插件，它绑定到数据并正常工作，但是当使用

ng repeat

时，我们必须用

$timeout

来包装它的初始化，这样它才能工作——现在甚至不工作了

我认为使用

$timeout

是不可靠的，这会导致错误的修复。在jQuery中，我可以使用

$（document）.ready（）

-这是实心的，但是使用

angular.element（document）.ready（）

似乎也不起作用

已调用slider指令，但无法获取滑块中图像的高度，因为图像尚未加载到DOM中-导致滑块的计算高度为0

目前我发现这非常令人沮丧-必须有一种方法在数据（例如在

ng repeat

中）循环通过后操作DOM

滑块的初始化操作如下所示：

var sliderLoad=函数（）{
$timeout（函数（）{
var setHeight=elem.find（'.slide:eq（0'））.outerHeight（true）；
元素css({
高度：设置高度
});
}, 1000);
//显示滑块导航按钮
elem.parent（）.find（'.direction nav'）.show（）；
};

…这是一个

快，弄脏它 我们希望确保所有图像都已加载，因此让我们为此编写一个指令：

app.directive（'loadDispatcher'，function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
元素绑定（'load'，function（））{
作用域。$emit（“$imageLoaded”）；
});
}
};
})

…并将其连接到

ng src

'd元素：

现在，我们可以将捕获的事件数量与我们的模型进行比较，并根据需要采取行动：

var loadCount=0；
作用域（“$imageLoaded”，函数（）{
if（loadCount++==scope.videos.objects.length-1）{
_initSlider（）；//动作！
}
});

将其解耦 这有点令人不安，因为它没有遵守-任何观看

$imageLoaded

事件的指令都必须了解模型（

scope.videos.objects.length

）

我们可以通过找出加载了多少图像而不显式寻址模型来防止这种耦合。让我们假设事件将在

ng repeat

中处理

确保

ng repeat

已完成，并触发具有项目计数的事件。我们可以通过附加一个唯一用途的控制器来实现这一点，即监视

$last

属性。一旦找到它（具有真实值），我们将触发一个事件来通知它：

.controller（'LoopWatchCtrl'，函数（$scope）{
$scope.$watch（'$last'，函数（newVal，oldVal）{
newVal&&$scope.$emit（“$repeatFinished”、$scope.$index）；
});
})

现在，捕捉事件并相应地激活滑块初始化：

var loadCount=0，
lastIndex=0；
作用域.$on（“$repeatFinished”，函数（事件、数据）{
lastIndex=数据；
});
作用域.$on（“$imageLoaded”，函数（）{
if（lastIndex&&loadCount++==lastIndex）{
_initSlider（元素）；//这是在任何地方定义的
}
});

现在，我们的指令不必了解模型。但是，这有点麻烦，现在我们必须绑定一个指令和一个控制器

折叠它 让我们将整个沙邦提取为一个指令：

app.directive（'imageLoadWatcher'，函数（$rootScope）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
if（typeof$rootScope.loadCounter=='undefined'）{
$rootScope.loadCounter=0；
}
元素。find（'img'）。bind（'load'，function（）{
scope.$emit（“$imageLoaded”，$rootScope.loadCounter++）；
});
},
控制器：功能（$scope）{
$scope.$parent.$on（“$imageLoaded”，函数（事件，数据）{
如果（$scope.$last&&$scope.$index===$rootScope.loadCounter-1）{
$scope.$emit（“$allImagesLoaded”）；
删除$rootScope.loadCounter；
}
});
}
};
});

…将应用于

ng repeat

ed元素：

现在，我们只需在滑块中观看

$allImagesLoaded

：

scope.$on（'$allImagesLoaded'，function（）{
_初始滑块（元件）；
});

概括它（如果你想的话） 我们可以再次分解它，并在应用程序范围内应用此方法，对任何

ng repeat

finish或

ng src

加载使用事件调度，这并不总是必要的（1），但可能非常有用。让我们看看如何：

修饰

ng src

指令，以便在加载图像时发送事件：

app.config（函数（$provide）{
$provide.decorator（'ngsrcdirection'，函数（$delegate）{
var指令=$delegate[0]，
link=directive.link；
directive.compile=函数（）{
返回函数（范围、元素、属性）{
应用（这个，参数）；
元素绑定（'load'，function（））{
作用域。$emit（“$imageLoaded”）；
});
};
};
返回$delegate；
});
// ...
});

装饰

ng repeat

以在完成时通知：

app.config（函数（$provide）{
// ...
$provide.decorator（'ngRepeatDirective'，函数（$delegate）{
var指令=$delegate[0]，
link=directive.link；
directive.compile=函数（）{