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 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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 读取文件乱码问题
2010/02/20 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
javascript中this的四种用法
2015/05/11 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
会计自我鉴定
2013/11/02 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
工作态度怎么写
2015/06/25 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis