AngularJS使用自定义指令替代ng-repeat的方法


Posted in Javascript onSeptember 17, 2016

前言

大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些。特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令。

ng-repeat中的表达式和 $watch

Angular中的表达式都会创建$watch Scope 函数。用于监听模型变化,当你的模型部分发生变化时它会通知你。在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15000个,这性能简直难以想象。

所以当我们想要实现ng-repeat的功能又想兼备性能,那只能另找一种方法了。

替换ng-repeat的方法

如果内容是静态的,我们不需要两种方式的绑定,只需要执行一次赋值语句{{::value}}就可以。如果anguluarJS是1.3以下的旧版本,是不支持的一次性绑定语法的。那么最好的方法就是自定义指令,换言之,静态数据可以使用一些简单的方法来格式化。

实现步骤

1、首先创建无序列表,用于保存动态绑定的内容。

创建UL标签作为容器用于显示列表

我们选择动态加载List中的数据,首先添加div标签,并命名为"repeater-alternative"用于渲染流中。

<div>
 <ul>
  <div repeater-alternative></div>
 </ul>
</div>

2、定义List 数据:

//示例数据
var studentsList = 
[
 {
  FirstName: "Raj,
  LastName : "B",
  Country : "India",
  BirthDate: "01/01/1990"
 },
 {
  FirstName: "Kumar,
  LastName : "S",
  Country : "India",
  BirthDate: "01/01/1990"
 },
 ..................
 ..................
 ..................
 ..................
];

$scope.collectionObject = studentsList; //分配给$scope函数

3、实际List内容

主要目的适用于重复集合对象,并显示到列表中,所以需要制定访问循环的逻辑,并按照需求来格式化字符串。

var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
  tableRow = tableRow + ['<li>',
  '<div class="col-md-1">' + item.FirstName + '</div> ',
  '<div class="col-md-1 ">' + item.LastName + '</div> ',
  '<div class="col-md-1 ">' + item.Country+ '</div> ',
  '<div class="col-md-1 ">' + item.Id + '</div> ',
  '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ',
  '</li>'].join('');
});

4、List格式化逻辑

一旦collectionObject的值已被赋给其他变量,就需要定义显示数据的表格。

5、如何获取分配CollectionObject的时间

Angular会监控$scope变量值得改变,一旦值被修改,则$watch将被处罚,所以需要将CollectionObject赋值逻辑放到$scope变量的$watch中。

代码如下:

$scope.$watch($scope.object, function (oldValue, newValue) { 
})

即,当我们执行赋值语句是,Angular会处理这个事件,并格式化List的内容。

$scope.$watch('collectionObject', function (oldValue, newValue) {
 var tableRow = "";
 angular.forEach($scope.collectionObject, function (item) {
  tableRow = tableRow + ['<li>',
  '<div class="col-md-1">' + item.FirstName + '</div> ',
  '<div class="col-md-1 ">' + item.LastName + '</div> ',
  '<div class="col-md-1 ">' + item.State + '</div> ',
  '<div class="col-md-1 ">' + item.Id + '</div> ',
  '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ',
  '</li>'].join('');
 });
})

接下来就是将内容渲染到表格控件中,也就是HTML<DIV>repeater-alternative标签中。
首先必须理解Angular的Directive机制,简单而言,就是我们来指示Angular,当指定的变量被发现,就开始执行后台操作。

var userDirectives = angular.module([]);

userDirectives.directive('DOMElementFound', function () {
 return {
  replace: true,
  link: function ($scope, $elem, attrs) {
     //后台处理操作  }
 }
});

我们会通知Angular,当发现"repeater-alternative" 元素,则将以下数据渲染到列表行中。

代码如下:

var userDirectives = angular.module([]);

userDirectives.directive('repeaterAlternative', function () {
 return {
  replace : true,
  link: function ($scope, $elem, attrs) {

   $scope.$watch('collectionObject', function (oldValue, newValue) {
    var tableRow = "";
    angular.forEach($scope.collectionObject, function (item) {
     tableRow = tableRow + ['<li>',
         '<div class="col-md-1">' + item.FirstName + '</div> ',
         '<div class="col-md-1 ">' + item.LastName + '</div> ',
         '<div class="col-md-1 ">' + item.State + '</div> ',
         '<div class="col-md-1 ">' + item.Id + '</div> ',
         '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ',
         '</li>'].join('');
    });

    
    //If IE is your primary browser, innerHTML is recommended to increase the performance
    $elem.context.innerHTML = tableRow;
    //If IE is not your primary browser, just appending the content to the element is enough .
    //$elem.append(tableRow);
   });
  }
 }
});

总结

在本文中,主要模拟了ng-repeat的工作方式和逻辑,但只限于静态内容,所以输出结果与调用ng-repeat结果相同,但是渲染更快,因为该方法只有一种数据绑定方式和少量的$watch。以上就是这篇文章的全部内容,希望本文的内容能对大家的学习或者工作有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
微信小程序 form组件详解
Oct 25 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 #Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 #Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 #Javascript
利用js编写响应式侧边栏
Sep 17 #Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 #Javascript
JavaScript编写一个简易购物车功能
Sep 17 #Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 #Javascript
You might like
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php实现图片缩放功能类
2013/12/18 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
PyQT实现多窗口切换
2018/04/20 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
Python扫描端口的实现
2021/01/25 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
电厂职工自我鉴定
2014/02/20 职场文书
中学社团活动总结
2015/05/07 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
导游词之桂林山水
2019/09/20 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA