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 相关文章推荐
js精度溢出解决方案
Dec 02 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
vue文件树组件使用详解
Mar 29 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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
第十二节--类的自动加载
2006/11/16 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
js canvas实现五子棋小游戏
2021/01/22 Javascript
Python运算符重载用法实例分析
2015/06/01 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python3 线性回归验证方法
2019/07/09 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python list转置和前后反转的例子
2019/08/26 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
基于python代码批量处理图片resize
2020/06/04 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
android面试问题与答案
2016/12/27 面试题
面向对象概念面试题(.NET)
2016/11/04 面试题
十岁生日家长答谢词
2014/01/17 职场文书
一名老师的自我评价
2014/02/07 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
国际商务专业求职信
2014/07/15 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书