写在前面
最近在项目中遇到这样的一个前端的bug，在ng-repeat中绑定的图片，有一个晃动的特效，在手机端浏览的时候，图片有时候会正常展示，有时就展示不出来。当时猜测是因为angularjs与特效的那些代码加载的先后顺序造成的。有了这样的猜测，就有查找解决方案的方向了。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-class,ng-class-even,ng-class-odd
[Angularjs]ng-repeat中使用ng-model遇到的问题
解决方案
自定义一个指令，在加载完成angular repeat时，然后再去绑定那些特效。具体如下所示：
var app = angular.module('mylibraryapp', ['ngRoute', 'pascalprecht.translate', 'ngFileUpload']); //指令 app.directive('onFinishRenderFilters', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished'); }); } } } });
在使用ng-repeat的标签上面添加这样的代码
<div class="item" id="filediv" ng-repeat="file in files" on-finish-render-filters> ........ </div>
在对应的Controller里面，添加angular repeat执行完成的回调方法
//加载完成 $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) { new WOW().init(); var h = $(window).height(); $(".modal-dialog").css("margin-top", (h / 2) - 100 + "px"); });
总结
这个问题折腾了很长时间，在电脑上测试测试不出来，在部分低版本的android手机上面有这样的问题。
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版权： | 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/5089637.html |
