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 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
php中http_build_query 的一个问题
2012/03/25 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
关于php中一些字符串总结
2016/05/05 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python中动态检测编码chardet的使用教程
2017/07/06 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python程序文件扩展名知识点详解
2020/02/27 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
经典促销广告词大全
2014/03/19 职场文书
村干部培训班主持词
2014/03/28 职场文书
村容村貌整治方案
2014/05/21 职场文书
五好关工委申报材料
2014/05/31 职场文书
2015年重阳节主持词
2015/07/04 职场文书
小学语文教师研修日志
2015/11/13 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis