[Angularjs]angular ng-repeat與js特效加載先后導致的問題

寫在前面

最近在項目中遇到這樣的一個前端的bug，在ng-repeat中綁定的圖片，有一個晃動的特效，在手機端瀏覽的時候，圖片有時候會正常展示，有時就展示不出來。當時猜測是因為angularjs與特效的那些代碼加載的先后順序造成的。有了這樣的猜測，就有查找解決方案的方向了。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]視圖和路由（一）

[Angularjs]視圖和路由（二）

[Angularjs]視圖和路由（三）

[Angularjs]視圖和路由（四）

[Angularjs]ng-class,ng-class-even,ng-class-odd

[Angularjs]單頁應用之分頁

[Angularjs]國際化

[Angularjs]ng-repeat中使用ng-model遇到的問題

[Angularjs]過濾器

[Angularjs]ng-file-upload上傳文件

解決方案

自定義一個指令，在加載完成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手機上面有這樣的問題。