[Angularjs]angular ng-repeat与js特效加载先后导致的问题

@H_403_0@写在前面
最近在项目中遇到这样的一个前端的bug，在ng-repeat中绑定的图片，有一个晃动的特效，在手机端浏览的时候，图片有时候会正常展示，有时就展示不出来。当时猜测是因为angularjs与特效的那些代码加载的先后顺序造成的。有了这样的猜测，就有查找解决方案的方向了。

@H_403_0@系列文章
<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4614532.html">[Angularjs]ng-select和ng-options

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4620150.html">[Angularjs]ng-show和ng-hide

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4621854.html">[Angularjs]视图和路由（一）

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4638029.html">[Angularjs]视图和路由（二）

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4640725.html">[Angularjs]视图和路由（三）

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4656216.html">[Angularjs]视图和路由（四）

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4676116.html">[Angularjs]ng-class,ng-class-even,ng-class-odd

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4713028.html">[Angularjs]单页应用之分页

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4732942.html">[Angularjs]国际化

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4749854.html">[Angularjs]ng-repeat中使用ng-model遇到的问题

<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/wolf-sun/p/4752004.html">[Angularjs]过滤器

<a href="http://www.cnblogs.com/wolf-sun/p/4781673.html" target="blank">[Angularjs]ng-file-upload上传文件

@H403_0@解决方案
自定义一个指令，在加载完成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;">);

});

}

}

}

});

[Angularjs]angular ng-repeat与js特效加载先后导致的问题

猜你在找的Angularjs相关文章