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

写在前面

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

解决方案

自定义一个指令，在加载完成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手机上面有这样的问题。