码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-12-30 19:29:34      阅读:2628      评论:0      收藏:0      [点我收藏+]

标签:

写在前面

最近在项目中遇到这样的一个前端的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手机上面有这样的问题。

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

标签:

原文地址:http://www.cnblogs.com/wolf-sun/p/5089637.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!