写在前面
图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来。当时猜测是因为angularjs与特效的那些代码加载的先后顺序造成的。有了这样的猜测,就有查找解决方案的方向了。
系列文章
解决方案
自定义一个指令,在加载完成angular repeat时,然后再去绑定那些特效。具体如下所示:
app = angular.module(,[,,<span style="color: #008000;">//<span style="color: #008000;">指令
app.directive(<span style="color: #800000;">'<span style="color: #800000;">onFinishRenderFilters<span style="color: #800000;">'<span style="color: #000000;">,function ($timeout) {
<span style="color: #0000ff;">return<span style="color: #000000;"> {
restrict: <span style="color: #800000;">'<span style="color: #800000;">A<span style="color: #800000;">'<span style="color: #000000;">,link: function (scope,element,attr) {
<span style="color: #0000ff;">if (scope.$last === <span style="color: #0000ff;">true<span style="color: #000000;">) {
$timeout(function () {
scope.$emit(<span style="color: #800000;">'<span style="color: #800000;">ngRepeatFinished<span style="color: #800000;">'<span style="color: #000000;">);
});
}
}
}
});
app.directive(<span style="color: #800000;">'<span style="color: #800000;">onFinishRenderFilters<span style="color: #800000;">'<span style="color: #000000;">,function ($timeout) {
<span style="color: #0000ff;">return<span style="color: #000000;"> {
restrict: <span style="color: #800000;">'<span style="color: #800000;">A<span style="color: #800000;">'<span style="color: #000000;">,link: function (scope,element,attr) {
<span style="color: #0000ff;">if (scope.$last === <span style="color: #0000ff;">true<span style="color: #000000;">) {
$timeout(function () {
scope.$emit(<span style="color: #800000;">'<span style="color: #800000;">ngRepeatFinished<span style="color: #800000;">'<span style="color: #000000;">);
});
}
}
}
});
= id= ng-repeat= on-finish-render-filters>
添加angular repeat执行完成的回调方法
$scope.$on( h =).css(,(h / ) - +
总结
原文链接:https://www.f2er.com/angularjs/191489.html