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 相关文章推荐
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
javascript简易画板开发
Apr 12 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
分析JS单线程异步io回调的特性
Dec 01 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP学习笔记之session
2018/05/06 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
jquery实现动态添加附件功能
2018/10/23 jQuery
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
深入浅析python继承问题
2016/05/29 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Python matplotlib实时画图案例
2020/04/23 Python
Python如何定义有可选参数的元类
2020/07/31 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
商场促销活动总结
2014/07/10 职场文书
新闻传播专业求职信
2014/07/22 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
中秋晚会致辞
2015/07/31 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android