[Angularjs]angular ng-repeat与js特效加载先后导致的问题
2024-10-09 20:42:38
写在前面
最近在项目中遇到这样的一个前端的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 / ) - + "px");
});
总结
这个问题折腾了很长时间,在电脑上测试测试不出来,在部分低版本的android手机上面有这样的问题。
最新文章
- noi 2728 摘花生
- Java中类名与文件名的关系
- linux命令(3):复制,剪切(文件和文件夹)
- 贱贱的美团安卓客户端---如何实现让安卓app在应用列表获得较靠前的位置
- vmware以及schlumberger题解
- BABOK - 企业分析(Enterprise Analysis)
- Greatest common divisor(gcd)
- ASP.NET自定义控件组件开发 第一章 待续
- webpack的四大核心概念
- JAVA并发编程学习笔记------基础构建模块
- 【HDU 1576】 A/B
- UNIX环境高级编程——环境变量表读取/添加/修改/删除
- Celery - 一个懂得 异步任务 , 定时任务 , 周期任务 的芹菜
- 支持向量机(SVM)
- bug笔记(pc)
- datatable 转list ,list转datatable
- ant_任务的含义与使用
- mysql ";The user specified as a definer (&#39;root&#39;@&#39;%&#39;) does not exist"; 问题
- U3D学习07-插值运算(位移与旋转)
- Spring报NoSuchBeanDefinitionException