写在前面

最近在项目中遇到这样的一个前端的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. slidingMenu有时候需要关闭侧边栏

    12个页签能往左滑动 但是往右滑动侧边栏就出来了 我们ViewPager的事件被占用了,那么就得关闭侧边栏的事件(第一个页签可以开启) 那么写个方法关闭侧边栏 slidingMenu.setTouch ...

  2. findstr()与strfind()的区别

    matlab中这两个字符串查找的函数findstr(), strfind()表明上看起来用法相似,效果也相似. 1. findstr(s1,s2)--在较长的字符串中查找较短的字符串出现的次数,并返回 ...

  3. Navicat for mysql 显示中文乱码问题

    使用navicat for mysql 打开数据库时,使用Console插入和查询数据显示乱码 处理过程 1.查看数据库编码为" utf8 -- UTF-8 Unicode",也就 ...

  4. Canvas 教程

    在本文章中 在你开始之前 教程内容 相关资料 A note to contributors <canvas> 是一种可以通过编写脚本(通常是JavaScript)来实现绘制图形的HTML元 ...

  5. 数据库防火墙如何防范SQL注入行为

    SQL注入是当前针对数据库安全进行外部攻击的一种常见手段.现有主流应用大多基于B/S架构开发,SQL注入的攻击方式正是利用web层和通讯层的缺陷对数据库进行外部恶意攻击.将SQL命令巧妙的插入通讯的交 ...

  6. java中的自增问题

    运行下面这段代码,其结果是什么呢? package com.test; public class Inc { public static void main(String[] args) { Inc ...

  7. 嵌入式linux驱动开发之给linux系统添加温度传感器模块

    忙了几天,终于可以让ds18b20在自己的开发板的linux系统上跑了!虽然ds18b20不是什么新鲜玩意,但是想想知己可以给linux系统添加模块了还是有点小鸡冻呢! 虽然说现在硬件的资源非常丰富而 ...

  8. SequoiaDB 系列之三 :SequoiaDB的高级功能

    上一篇简单描述了一下SequoiaDB的简单CRUD操作,本篇将讲述一下稍微高级点的功能. 部署在我机器上的集群环境,在经过创建名字为"foo"的cs,创建名字为"bar ...

  9. 05.C#泛型类型(三章3.1-3.2)

    接下来说下C#中的泛型,熟练地使用泛型能提高代码的重用性,使用我们代码瞬间就高大上了,当然只有一点点,真的只有一点点,因为后面要学习和掌握的知识还有很多.先来看下一个使用Dictionary<T ...

  10. Linq之Expression初见

    目录 写在前面 系列文章 Expression 表达式树创建方式 一个例子 总结 写在前面 上篇文章介绍了扩展方法,这篇文章开始将陆续介绍在linq中使用最多的表达式树的相关概念,以概念及例子一一列出 ...