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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
js location.replace与location.reload的区别
Sep 08 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 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开发框架总结收藏
2008/04/24 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
php 文件缓存函数
2011/10/08 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python 产生token及token验证的方法
2018/12/26 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
小学防溺水制度
2014/01/29 职场文书
税务干部鉴定材料
2014/02/11 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android