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

分类：JavaScript作者：佚名

前言

大家都知道对于处理小数量，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"用于渲染流中。

2、定义List 数据：

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

3、实际List内容

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

','
','
','
','
','
',''].join(''); });

4、List格式化逻辑

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

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

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

代码如下：

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

',''].join(''); }); })

接下来就是将内容渲染到表格控件中，也就是HTML

repeater-alternative标签中。 首先必须理解Angular的Directive机制，简单而言，就是我们来指示Angular,当指定的变量被发现，就开始执行后台操作。

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

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

代码如下：

userDirectives.directive('repeaterAlternative',function () {
return {
replace : true,attrs) {

$scope.$watch('collectionObject',newValue) {
var tableRow = "";
angular.forEach($scope.collectionObject,function (item) {
tableRow = tableRow + ['

  • ','
    • '].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。以上就是这篇文章的全部内容，希望本文的内容能对大家的学习或者工作有所帮助，如果有疑问大家可以留言交流。

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

    angularjs的ngngrepeat指令指令

    相关推荐

    哪些JavaScript IDE最好用？
    阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%，因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出常用的几款JavaScript IDE，分析其优缺点，如有不完善的请大家补充
    异步编程之Javascript Promises 规范介绍
    Promises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。本文简要的介绍了Promises的基础知识，希望我们我们能够更好的使用Promises，更轻松的编写代码。
    超越Web，Javascript在物联网的应用
    引子 Patrick Catanzariti 是一名Web开发工程师，最近他在 sitepoint 发表了《JavaScript Beyond the Web in 2014》，介绍了JavaScript在物联网中的应用，非常有意思。做为JavaScript的爱好者和从业者，我在这里把它翻译了，以飨
    JavaScript 常用功能总结
    小编吐血整理加上翻译，太辛苦了~求赞！ 本文主要总结了JavaScript 常用功能总结，如一些常用的JS 对象，基本数据结构，功能函数等，还有一些常用的设计模式。 目录： 众所周知，JavaScript是动态的面向对象的编程语言，能够实现以下效果： 1. 丰富Web 网页功能 2. 丰富Web界面
    微软Edge 内嵌的JavaScript 引擎即将开源
    微软于今日（2015年12月10日）宣布即将开源Chakra核心控件，并改名为“ChakraCore”,该控件包含所有Edge JavaScript 引擎的所有核心功能。ChakraCore 将于下月发布在GitHub中。 Chakra提供了顶级的JavaScript处理功能，并具有非常强大的性能优
    1000多个项目中的十大JavaScript错误以及如何避免
    通过统计数据库中的1000多个项目，我们发现在 JavaScript 中最常出现的错误有10个。本文会向大家介绍这些错误发生的原因以及如何防止。
    TypeScript VS JavaScript 深度对比
    TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言，我们已经熟知 TypeScript 是 JavaScript 的一个超集，但是 TypeScript 与 JavaScript 之间又有什么样的区别呢？在选择开发语言时，又该如何抉择呢？
    2017年 JavaScript 框架回顾 -- 后端框架
    本文是2017年 JavaScript 框架回顾系列的最后的一篇文章，主要介绍 JavaScript 的后端框架情况。
    JavaScript 开发人员需要知道的简写技巧
    本文来源于多年的 JavaScript 编码技术经验，适合所有正在使用 JavaScript 编程的开发人员阅读。本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。
    前端开发者常用的9个JavaScript图表库
    对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。
    顶级的JavaScript框架、库、工具及其使用
    几乎每隔一个星期，就有一个新的 JavaScript 库席卷网络社区！Web 社区日益活跃、多样，并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库，是个不可能完成的任务。接下来，我会分享一些前端开发的最著名和最有影响力的框架和库。下面，就让我们一起来看看，顶级的 JavaS
    一张图告诉你最流行的 7 个 JavaScript框架特点
    AngularJ.js 由google开发，2009年首次发布 很流行的前端框架 使用Angular.js创建第一个UI，成本很低 对于团队来说，AngularJ.js有许多很棒的工具可用 很适合创建一个快速、混合型复杂的解决方案 比起React，更合适于创建小型企业级应用 由Google负责维护基
    1分钟选好最合适你的JavaScript框架
    Javascript框架（以下简称框架）也被称为Javascript库，是一组包含丰富功能和函数的JavaScript代码集，能够帮助开发者快速完成Web设计和开发工作。随着Web社区的越发活跃，新的框架也层出不穷，目前流行的有：Angular、React、Vue.js和Knockout等。 面对如
    2017年 JavaScript 框架回顾 -- 前端框架
    对于 JavaScript 社区来说，npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架。npm 强大的搜索功能能够帮助找到一组相关的软件包，同时其内置的的文档和使用统计信息，可以帮助开发者决定使用哪一种软件包。
    SpreadJS使用进阶指南
    前言 SpreadJS作为一款性能出众的纯前端电子表格控件，自2015年发布以来，已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM，作为管理Node.js库最有力的手段，解决了很多NodeJS代码部署的问题。 如今，为让您更方便的使用产品和更好地管理项目中的SpreadJS代码，我们已
    2017年 JavaScript 框架回顾 -- React生态系统
    前一篇文章中，我们介绍了2017年 JavaScript 框架的整体情况。我们也了解到在众多的前端框架中，目前最为庞大又在快速增长的当属React了，本文就来重点介绍React的生态系统。
    ES2017异步函数现已正式可用
    ES2017标准已经于2017年6月份正式定稿了，并广泛支持最新的特性：异步函数。如果你曾经被异步JavaScript的逻辑困扰，这么新函数正是为你设计的。
    Top 10 JavaScript编辑器，你在用哪个？
    本文将会讨论10个优秀的支持JavaScript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。
    JavaScript中的内存泄漏以及如何处理
    随着现在的编程语言功能越来越成熟、复杂，内存管理也容易被大家忽略。本文将会讨论JavaScript中的内存泄漏以及如何处理，方便大家在使用JavaScript编码时，更好的应对内存泄漏带来的问题。
    JavaScript 性能优化技巧分享
    JavaScript 作为当前最为常见的直译式脚本语言，已经广泛应用于 Web 应用开发中。为了提高Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧，以便让更多的前端开
    pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot