[Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面
最近在项目中遇到这样的一个前端的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手机上面有这样的问题。
[Angularjs]angular ng-repeat与js特效加载先后导致的问题的更多相关文章
- Angular使用$compile为从Ajax加载的HTML绑定ng-click事件
这是一个Angular使用$compile为从Ajax加载的HTML绑定ng-click事件的实现方式,由于近期忙碌,就先放代码.代码如下: <table data-ng-table=" ...
- AngularJS中多个ng-app(手动加载模块)
1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="tex ...
- JS懒加载
4.如何使用js懒加载图片 a.懒加载图片是基于jquery.js的,所以: <script src="jquery.js" type="text/ja ...
- Arcgis for Js之加载wms服务
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...
- js 动态加载事件的几种方法总结
本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...
- js 模版加载到前端
js 模版加载到前端 简单有效不高端 配个路由 /js/:filename , 用 readTemplate 响应请求,前端可以按模块方式直接 require 模板 'use strict' var ...
- 前端设计中关于外部js文件加载的速度优化
在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
- js动态加载以及确定加载完成的代码
利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...
- 第三课:sea.js模块加载原理
模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...
随机推荐
- slidingMenu有时候需要关闭侧边栏
12个页签能往左滑动 但是往右滑动侧边栏就出来了 我们ViewPager的事件被占用了,那么就得关闭侧边栏的事件(第一个页签可以开启) 那么写个方法关闭侧边栏 slidingMenu.setTouch ...
- findstr()与strfind()的区别
matlab中这两个字符串查找的函数findstr(), strfind()表明上看起来用法相似,效果也相似. 1. findstr(s1,s2)--在较长的字符串中查找较短的字符串出现的次数,并返回 ...
- Navicat for mysql 显示中文乱码问题
使用navicat for mysql 打开数据库时,使用Console插入和查询数据显示乱码 处理过程 1.查看数据库编码为" utf8 -- UTF-8 Unicode",也就 ...
- Canvas 教程
在本文章中 在你开始之前 教程内容 相关资料 A note to contributors <canvas> 是一种可以通过编写脚本(通常是JavaScript)来实现绘制图形的HTML元 ...
- 数据库防火墙如何防范SQL注入行为
SQL注入是当前针对数据库安全进行外部攻击的一种常见手段.现有主流应用大多基于B/S架构开发,SQL注入的攻击方式正是利用web层和通讯层的缺陷对数据库进行外部恶意攻击.将SQL命令巧妙的插入通讯的交 ...
- java中的自增问题
运行下面这段代码,其结果是什么呢? package com.test; public class Inc { public static void main(String[] args) { Inc ...
- 嵌入式linux驱动开发之给linux系统添加温度传感器模块
忙了几天,终于可以让ds18b20在自己的开发板的linux系统上跑了!虽然ds18b20不是什么新鲜玩意,但是想想知己可以给linux系统添加模块了还是有点小鸡冻呢! 虽然说现在硬件的资源非常丰富而 ...
- SequoiaDB 系列之三 :SequoiaDB的高级功能
上一篇简单描述了一下SequoiaDB的简单CRUD操作,本篇将讲述一下稍微高级点的功能. 部署在我机器上的集群环境,在经过创建名字为"foo"的cs,创建名字为"bar ...
- 05.C#泛型类型(三章3.1-3.2)
接下来说下C#中的泛型,熟练地使用泛型能提高代码的重用性,使用我们代码瞬间就高大上了,当然只有一点点,真的只有一点点,因为后面要学习和掌握的知识还有很多.先来看下一个使用Dictionary<T ...
- Linq之Expression初见
目录 写在前面 系列文章 Expression 表达式树创建方式 一个例子 总结 写在前面 上篇文章介绍了扩展方法,这篇文章开始将陆续介绍在linq中使用最多的表达式树的相关概念,以概念及例子一一列出 ...