写在前面

最近在项目中遇到这样的一个前端的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 / ) - + "px");
});

总结

这个问题折腾了很长时间,在电脑上测试测试不出来,在部分低版本的android手机上面有这样的问题。

[Angularjs]angular ng-repeat与js特效加载先后导致的问题的更多相关文章

  1. Angular使用$compile为从Ajax加载的HTML绑定ng-click事件

    这是一个Angular使用$compile为从Ajax加载的HTML绑定ng-click事件的实现方式,由于近期忙碌,就先放代码.代码如下: <table data-ng-table=" ...

  2. AngularJS中多个ng-app(手动加载模块)

    1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="tex ...

  3. JS懒加载

    4.如何使用js懒加载图片       a.懒加载图片是基于jquery.js的,所以: <script src="jquery.js" type="text/ja ...

  4. Arcgis for Js之加载wms服务

    概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...

  5. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

  6. js 模版加载到前端

    js 模版加载到前端 简单有效不高端 配个路由 /js/:filename ,  用 readTemplate 响应请求,前端可以按模块方式直接 require 模板 'use strict' var ...

  7. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  8. js动态加载以及确定加载完成的代码

    利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...

  9. 第三课:sea.js模块加载原理

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...

随机推荐

  1. PowerShell全自动分配CPU

    代码 $pro = Get-Process foreach ($n in $pro){ if($n.ProcessorAffinity -ne 255){ #continue } if($n.Id - ...

  2. JavaScript设计模式——状态模式

    状态和行为: 所谓对象的状态,通常指的就是对象实例的属性的值:而行为指的就是对象的功能,再具体点说,行为大多可以对应到方法上. 状态模式的功能就是分离状态的行为,通过维护状态的变化,来调用不同状态对应 ...

  3. SAP 通过屏幕字段查看透明表

    我要查看创建采购订单屏幕上抬头部分付款条件的这个透明表中的字段. 图1. 1.首先准备好MM模块中的常用透明表. 图2. 2.把光标放在字段上,按F1,再点击图中技术信息按钮. 图3. 3.在弹出的技 ...

  4. VMware中三种网络连接的区别

    1.概述 大家在安装完虚拟机后,默认安装了如下图的两块虚拟网卡——VMnet1和VMnet8,其中VMnet1是host网卡,用于host方式连接网络:VMnet8是NAT网卡,用于NAT方式连接网络 ...

  5. eclipse下python的selenium自动化环境的搭建

    前提:安装python,我用的2.7.8版本,并在环境变量path里设置;E:\Python1.解压setuptools(Python包管理工具),cmd到目录执行python setup.py in ...

  6. PowerDesigner 模型文档 说明

    PowerDesigner 模型文档 说明   目录(?)[+]   一. 模型文档说明 在前面几篇里介绍了PowerDesigner 的几种模型,如果我们项目里用到的模型较多,亦或者项目牵涉的部门很 ...

  7. 用Delphi 实现WebService 转

    一编写服务程序 第一步:File----->New----->Other------>WebServices----->Soap Server Application 选择IS ...

  8. js 保留两位小数 多位小数(javascript)

    <SCRIPT LANGUAGE="JavaScript"><!--function formatFloat(src, pos){    return Math. ...

  9. Linux系统学习笔记:文件描述符标志

    文件描述符标志的概念 文件描述符标志(目前就只有一个close-on-exec): 它仅仅是一个标志,当进程fork一个子进程的时候,在子进程中调用了exec函数时就用到了这个标志.意义是执行exec ...

  10. edgedb 内部pg 数据存储的探索 (五) 运行进程列表信息

    做为一个简单的记录,方便后期分析学习 当前包含了一个timescale 的extension 可以不用关注 信息 ps -ef |grep edgedb edgedb 10559 24858 0 4月 ...