AngularJS中的Directive实现延迟加载


Posted in Javascript onJanuary 25, 2016

所谓的延迟加载通常是:直到用户交互时才加载。如何实现延迟加载呢?

需要搞清楚三个方面:

1、html元素的哪个属性需要延迟加载?
2、需要对数据源的哪个字段进行延迟加载?
3、通过什么事件来触发延迟加载?

自定义的Directive的页面表现大致是这样:

<ul>
<li ng-repeat="cust in customers"
delay-bind="{{::cust.street}}"
attribute="title"
trigger="mouseenter">
<a delay-bind="{{::cust.url}}"
attribute="href"
trigger="mouseenter">
{{cust.name}}
</a>
</li>
</ul>
<div>Total Cusotmers: {{::customers.length}}</div>

以上,
● delay-bind表示要从数据源中取出的某个字段值
● attribute表是html元素属性,对该属性延迟赋值
● trigger表示通过那个事件来触发延迟加载

Directive代码大致如下:

//interpolate的存在允许one-time一次性绑定
(function(){
var delayBindWithCompile = ['$interpolate', function($interpolate){
var compile = fucntion(tElem, tAttrs){
//delay-bind="{{::cust.street}}"
//这里返回的是一个函数,也就相当于针对street属性的编译开始,相当于把编译的功能先缓存在这里
var interpolateFunc = $interpolate(tAttrs.delayBind);
//重新设置delayBind的属性值,这时候DOM还没有加载呢
tAttrs.$set('delayBind', null); //相当于清除属性值
return {
pre: function(scope, elem, attrs){
},
post: function(scope, elem, attrs){
//trigger="mouseenter"
elem.on(attrs.trigger, function(event){
//attribute="title" 这里title是表示真正要延迟更新的属性
var attr = atts.attribute,
val = interpolateFunc(scope); //编译真正执行
if(attr && !elem.attr(attr)){
elem.attr(attr, val);
}
});
}
}
};
return {
restrict: 'A',
compile: compile
}
}];
angular.module('directivesModule')
.directive('delayBind', delayBindWithCompile);
}());

以上,compile方法中用到了$interpolate服务,$interpolate这个服务首先可以通过$interpolate(tAttrs.delayBind)把数据源某个字段的属性值先编译缓存起来,在post-link,也就是这里的post函数中,当触发引起延迟加载的事件,再让$interpolate服务开始编译把值赋值给html元素的某个属性。

以上所述是针对AngularJS中的Directive实现延迟加载的相关内容,希望对大家有所帮助。

Javascript 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 #Javascript
理解JavaScript事件对象
Jan 25 #Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 #Javascript
学习JavaScript事件流和事件处理程序
Jan 25 #Javascript
javascript产生随机数方法汇总
Jan 25 #Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 #Javascript
理解JavaScript表单的基础知识
Jan 25 #Javascript
You might like
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
python线程池的实现实例
2013/11/18 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
Python 复平面绘图实例
2019/11/21 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
部门年终奖分配方案
2014/05/07 职场文书
运动会入场口号
2014/06/07 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
退伍军人感言
2015/08/01 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
java基础——多线程
2021/07/03 Java/Android
Golang 结构体数据集合
2022/04/22 Golang