对 AngularJS 进行性能调优的 7 个建议 - Web前端 - ITeye资讯
相关知识库：
AnglarJS作为一款优秀的Web框架，可大大简化前端开发的负担。近日Sebastian Fr?stl在一篇博文《》中表示AnglarJS在处理包含复杂数据结构的大型列表时，其运行速度会非常慢。他在文中同时分享了解决方案。下面为该文的译文。
AnglarJS很棒，但当处理包含复杂数据结构的大型列表时，其运行速度就会非常慢。这是我们将核心管理页面迁移到AngularJS过程中遇到的问题。这些页面在显示500行数据时本应该工作顺畅，但首个方法的渲染时间竟花费了7秒，太可怕了。
后来，我们发现了在实现过程中存在两个主要性能问题。一个与“ng-repeat ”指令有关，另一个与过滤器有关。
下文将分享我们通过不同的方法解决性能问题的经验，希望可以给你带来启示。
一、AngularJS 中的ng-repeat在处理大型列表时，速度为什么会变慢？
AngularJS中的ng-repeat在处理2500个以上的双向数据绑定时速度会变慢。这是由于AngularJS通过“dirty checking”函数来检测变化。每次检测都会花费时间，所以包含复杂数据结构的大型列表将降低你应用的运行速度。
二、提高性能的先决条件
时间记录指令
为了测量一个列表渲染所花费的时间，我们写了一个简单的程序，通过使用“ng-repeat”的属性“$last”来记录时间。时间存放在TimeTracker服务中，这样时间记录就与服务器端的数据加载分开了。
// Post repeat directive for logging the rendering time
angular.module('siApp.services').directive('postRepeatDirective',
['$timeout', '$log',
'TimeTracker',
function($timeout, $log, TimeTracker) {
return function(scope, element, attrs) {
if (scope.$last){
$timeout(function(){
var timeFinishedLoadingList = TimeTracker.reviewListLoaded();
var ref = new Date(timeFinishedLoadingList);
var end = new Date();
$log.debug("## DOM rendering list took: " + (end - ref) + " ms");
// Use in HTML:
&tr ng-repeat="item in items" post-repeat-directive&…&/tr&
Chrome开发者工具的时间轴（Timeline）属性
在Chrome开发者工具的时间轴标签中，你可以看见事件、每秒内浏览器帧数和内存分配。“memory”工具用来检测内存泄漏，及页面所需的内存。当帧速率每秒低于30帧时就会出现页面闪烁问题。“frames”工具可帮助了解渲染性能，还可显示出一个JavaScript任务所花费的CPU时间。
三、通过限制列表的大小进行基本的调优
缓解该问题，最好的办法是限制所显示列表的大小。可通过分页、添加无限滚动条来实现。
分页，我们可以使用AngularJS的“limitTo”过滤器（AngularJS1.1.4版本以后）和“startFrom”过滤器。可以通过限制显示列表的大小来减少渲染时间。这是减少渲染时间最高效的方法。
// Pagination in controller
$scope.currentPage = 0;
$scope.pageSize = 75;
$scope.numberOfPages = function() {
return Math.ceil($scope.displayedItemsList.length/ $scope.pageSize);
// Start from filter
angular.module('app').filter('startFrom', function() {
return function(input, start) {
return input.slice(start);
// Use in HTML
// Pagination buttons
&button ng-repeat="i in getNumber(numberOfPages()) track by $index" ng-click="setCurrentPage($index)"&{{$index + 1}}&/button
// Displayed list
&tr ng-repeat="item in displayedItemsList | startFrom: currentPage * pageSize
| limitTo:pageSize" /tr&
如果你不能/不想使用分页，但过滤过程又很慢，这时一定要检查前五步，并使用“ng-show”隐藏掉多余的列表元素。
无限滚动条
如果你希望进一步了解该方法，可访问
四、七大调优法则
1. 渲染没有数据绑定的列表
这是最明显的解决方案，因为数据绑定是性能问题最可能的根源。如果你只想显示一次列表，并不需要更新、改变数据，放弃数据绑定是绝佳的办法。不过可惜的是，你会失去对数据的控制权，但除了该法，我们别无选择。进一步了解： 。
2.不要使用内联方法计算数据
为了在控制器中直接过滤列表，不要使用可获得过滤链接的方法。“ng-repeat”会评估每个 [$digest()%5D表达式。在我们的案例中，“filteredItems()”返回过滤链接。如果评估过程很慢，它将迅速降低整个应用的速度。
&li ng-repeat="item in filteredItems()"&//这并不是一个好方法，因为要频繁地评估。
&li ng-repeat="item in items"&//这是要采用的方法
3.使用两个列表（一个用来进行视图显示，一个作为数据源）
将要显示的列表与总的数据列表分开，是非常有用的模型。你可以对一些过滤进行预处理，并将存于缓存中的链接应用到视图上。下面案例展示了基本实现过程。filteredLists变量保存着缓存中的链接，applyFilter方法来处理映射。
/* Controller */
// Basic list
var items = [{name:"John", active:true }, {name:"Adam"}, {name:"Chris"}, {name:"Heather"}];
// Init displayedList
$scope.displayedItems =
// Filter Cache
var filteredLists['active'] = $filter('filter)(items, {"active" : true});
// Apply the filter
$scope.applyFilter = function(type) {
if (filteredLists.hasOwnProperty(type){ // Check if filter is cached
$scope.displayedItems = filteredLists[type];
/* Non cached filtering */
// Reset filter
$scope.resetFilter = function() {
$scope.displayedItems =
/* View */
&button ng-click="applyFilter('active')"&Select active&/button&
&ul&&li ng-repeat="item in displayedItems"&{{item.name}}&li&&/ul&
4.在其他模板中使用ng-if来代替ng-show
如果你用指令、模板来渲染额外的信息，例如通过点击来显示列表项的详细信息，一定要使用& （AngularJSv. 1.1.5以后）。ng-if可阻止渲染（与ng-show相比）。所以其它DOM和数据绑定可根据需要进行评估。
&li ng-repeat="item in items"&
&p& {{ item.title }} &/p&
&button ng-click="item.showDetails = !item.showDetails"&Show details&/buttons&
&div ng-if="item.showDetails"&
{{item.details}}
5.不要使用ng-mouseenter、ng-mouseleave等指令
使用内部指令，像ng-mouseenter，AngularJS会使你的页面闪烁。浏览器的帧速率通常低于每秒30帧。使用jQuery创建动画、鼠标悬浮效果可以解决该问题。确保将鼠标事件放入jQuery的.live()函数中。
6.关于过滤的小提示：通过ng-show隐藏多余的元素
对于长列表，使用过滤同样会减低工作效率，因为每个过滤都会创建一个原始列表的子链接。在很多情况下，数据没有变化，过滤结果也会保持不变。所以对数据列表进行预过滤，并根据情况将它应用到视图中，会大大节约处理时间。
在ng-repeat指令中使用过滤器，每个过滤器会返回一个原始链接的子集。AngularJS 从DOM中移除多余元素（通过调用 $destroy），同时也会从$scope中移除他们。当过滤器的输入发生改变时，子集也会随着变化，元素必须进行重新链接，或着再调用$destroy。
大部分情况下，这样做很好，但一旦用户经常过滤，或者列表非常巨大，不断的链接与销毁将影响性能。为了加快过滤的速度，你可以使用ng-show和ng-hide指令。在控制器中，进行过滤，并为每项添加一个属性。依靠该属性来触发ng-show。结果是，只为这些元素增加ng-hide类，来代替将它们移除子列表、$scope和DOM。
触发ng-show的方法之一是使用表达式语法。ng-show的值由表达式语法来确定。可以看下面的例子：
&input ng-model="query"&&/input&
&li ng-repeat="item in items" ng-show="([item.name] | filter:query).length"&{{item.name}}&/li&&span style="font-size: 14 line-height: 24 font-family: Helvetica, Tahoma, Arial, sans- white-space:"&&/span&
另一个方法是为ng-show传递一个属性，并在单独的子控制器进行计算。该方法稍有点复杂，但却是更明晰的方法。
7.关于过滤的小提示：防抖动输入
解决第6点提出的持续过滤问题的另一个方法是防抖动用户输入。例如，如果用户输入一个搜索关键词，只当用户停止输入后，过滤器才会被激活。使用该防抖动服务的一个很好的解决方案请见：。将它应用到你的视图及控制器中，如下所示。
/* Controller */
// Watch the queryInput and debounce the filtering by 350 ms.
$scope.$watch('queryInput', function(newValue, oldValue) {
if (newValue === oldValue) { }
$debounce(applyQuery, 350);
var applyQuery = function() {
$scope.filter.query = $scope.
/* View */
&input ng-model="queryInput"/&
&li ng-repeat= item in items | filter:filter.query&{{ item.title }} &/li&
英文原文： / 译：
你不去尝试，怎么能知道他的美，不要因为没见过，没用过就不去做，其实除了前期学习成本外，这个框架还是不错的，维护起来方便。
bitray 写道这个js组件,我还真是只听过没见过,也没多少实际使用案例,真不敢轻易的去做Google目前推荐SPA，可以是去了解了解。个人觉得SPA是面向企业级应用开发，互联网模式可以也可以参考参考。
这个js组件,我还真是只听过没见过,也没多少实际使用案例,真不敢轻易的去做
好文。谢谢。拒绝访问 | www. | 百度云加速
请打开cookies.
此网站 (www.) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(38a8e5fa502743ef-ua98).
重新安装浏览器，或使用别的浏览器Error 404 (Not Found)!!1
404. That’s an error.
The requested URL /496966/ was not found on this server.
That’s all we know.自己用的AngularJS手册（待修改版） - JustForZR的博客 - CSDN博客
自己用的AngularJS手册（待修改版）
最近公司刚好要用到AngularJS，那我就自己边用边整理，虽然网上有完整的手册，但我还是想自己归纳一下，用到一点写一点， & & 毕竟自己用过的东西才算真正的掌握。
创建一个AngularJS模块
使用angular.module（）方法
设置一个模块的作用域
使用ng-app属性
定义一个控制器
使用Module.controller（）方法
将一个控制器应用于一个视图
使用ng-ontroller（）方法
从控制器向视图传递数据
使用$scope服务
自定义一个指令
使用Module.directive（）方法
自定义一个过滤器
Module.filter（）方法
以编程方式使用一个过滤器
使用$filter服务
自定义一个服务
使用Module.service（）/Module.factory（）/Module.provider（）方法
从一个已有的对象或值定义一个服务
使用Module.value（）方法
向应用程序中的代码添加结构
创建多个模块并从ng-app属性引用的模块中声明依赖
注册在模块被加载时调用的函数
使用Module.config（）和Module.run（）方法
绑定和模块指令
创建一个单向绑定
使用ng-bind（用于单个属性）或ng-bind-template（用于多个属性）指令 或内联表达式{{ }}
阻止AngularJS处理内联绑定表达式
使用ng-non-bindable指令
创建双向数据绑定
使用ng-model指令
生成重复内容
使用ng-repeat指令
获得ng-repeat指令中生成的对象的信息
使用ng-repeat内置变量，如$first（第一个）$last（最后一个）等
重复多个顶层属性
使用ng-repeat-start 和ng-repeat-end 指令
加载一个局部视图，如html文件
使用ng-include指令
有条件的显示元素
使用ng-switch指令
加载模块时隐藏内联表达式
使用ng-cloak指令
元素和事件指令
显示或隐藏元素
使用ng-show和ng-hide指令
从DOM中删除元素
使用ng-if指令
将元素添加到css类中，或者设置某个css
使用ng-class 或者 ng-style指令
对ng-repeat生成的奇数行或偶数行添加不同的css
使用ng-class-odd和ng-class-even指令
定义在某个事件被出发时执行的行为
如ng-click（点击），ng-blur（失去焦点)等
处理一个AngularJS未提供指令支持的事件
创建一个自定义事件指令
对元素使用布尔属性
使用一个布尔属性指令，如ng-checked等
完整事件指令表
失去焦点时触发
在表单元素内容发生变化时触发
点击时触发
ng-dbclick
获得焦点时触发
ng-keydown
键盘按下时触发
ng-keypress
键盘按下时触发
键盘按键抬起时吃法
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
表单提交时触发
表单中input 的type类型
创建一个复选框（h5之前就有）
创建一个接收邮件地址作为值的文本输入框（h5新增）
创建一个接收数值类型作为值得文本输入框（h5新增）
创建一个单选框（h5之前就有）
创建一个接收任何值的文本框（h5之前就有）
创建一个接收url作为值的文本输入框（h5新增）
表单指令定义的校验变量
用户没有与元素发生交互，则返回true
用户与元素发生交互，返回true
元素校验结果为有效时，返回true
元素校验结果为无效时，返回true
提供校验错误的有效信息
此外，还可用css提供的方法校验反馈信息
ng-pristime
用户未曾交互过的元素被添加到这么类
用户交互过的元素被添加到这么类
元素校验结果为有效时在这个类中
ng-invalid
元素校验结果为无效时在这个类中
适用于input元素的属性
元素被改变时被执行
ng-minlength
设置最小字符数长度
ng-maxlength
设置最大字符数长度
ng-pattern
设置正则表达式
ng-required
通过数据绑定设置required
币值过滤器
currency过滤器
格式化通用的数字值
number过滤器
格式化日期
data过滤器
改变对大小写
uppercase/lowercase过滤器
对过滤器产生的格式进行本地化
通过script标签增加一个angularjs本地化文件
从一个数组中选出一定数量的对象
limitTo过滤器
从数组中选取对象
fliter过滤器
对数组中的对象进行排序
orderBy过滤器
创建自定义过滤器
用Module.filter（）方法制定一个函数
组合多个过滤器
使用链式写法（链式过滤器）
jqLite操作Dom方法
children()
返回一组子元素
从一个元素集合中返回指定索引的元素
按照指定的tag名称定位所有的后代元素，jquery可以，jqLite不可用
获得下一个兄弟元素
返回父元素
jqLite修改元素方法
addClass(name)
attr(name,value)
设置一个自定义属性及属性值
css(name,value)
hasClass(name)
如果有指定的类名，返回true
prop(name,value)
设置指定值
removeAttr(name)
移除自定义属性
text(value)
设置文本内容
toggleClass(name)
有则移除类名，无则添加类名
val(value)
设置元素的value特性
removeClass(name)
jqLite创建和移除元素的方法
angular.element(html)
创建一个对象
after(elements)
在元素后面插入特定内容
append(elements)
将特定元素作为最后一个子元素插入
复制一个元素并作为新的对象返回
prepend(elements)
将特定元素作为第一个子元素插入
replaceWith(elements)
wrap(elements)
我的热门文章
即使是一小步也想与你分享请注意：如果想要本站的demo源码，请加QQ：，留言有可能看不到，并不是本人不发，谢谢合作。(可以提供有偿帮助哦~@~)
效果图如下:
学了一段时间的angular.js，该应用应用了，这个例子主要是跟页面表单以及数据列表显示有关系，中间包含了增删改查的效果，话不多说，请看代码:
index.html
&!doctype html&
&html ng-app="myApp"&
&title&&/title&
&meta charset="UTF-8" /&
&meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&
&link href="css/index.css" type="text/css" rel="stylesheet" /&
&style type="text/css" &
&div class="wrapper" &
&div ng-controller="dataListController" class="dataListController"&
&div class="btnGroup"&
&button class="btn" ng-click="add()"&添加&/button&
&div class="dataListContainer"&
&li ng-repeat="item in list" &
&p class="title"&&a href="{{item.url}}" target="_blank" &{{item.text}}&/a&&/p&
&img src="{{item.thumb}}" class="thumb" /&
&p class="des"&{{item.des}}&/p&
&div class="simpleInfo"&
&span &评论({{ments}})&/span&
&span &喜欢({{item.loves}})&/span&
&span &时间({{item.time}})&/span&
&span &&a href="javascript:void(0)" ng-click="edit($index)" &编辑&/a&&/span&
&span &&a href="javascript:void(0)" ng-click="remove($index)" &删除&/a&&/span&
&div ng-show="isShow" ng-controller="dataFormController" class="dataFormController"&
&form role="form" name="form" class="form" ng-submit="submit()"&
&a href="javascript:void(0)" class="close" ng-click="close(false)"&close&/a&
&h2 class="title"&添加信息&/h2&
&div class="col3" &标题:&/div&
&div class="col7" &&input type="text" required ng-model="formData.text" /&&/div&
&div class="col3" &链接:&/div&
&div class="col7" &&input type="text" required ng-model="formData.url" /&&/div&
&div class="col3" &样图:&/div&
&div class="col7" &&input type="text" required ng-model="formData.thumb" /&&/div&
&div class="col3" &介绍:&/div&
&div class="col7" &&textarea required required ng-model="formData.des"&&/textarea&&/div&
&div class="text-center"&
&input ng-disabled="form.$invalid" class="btn" type="submit" value="提交"&
&script type="text/javascript" src="js/angular.js" &&/script&
&script type="text/javascript" &
var app = angular.module('myApp', []);
&script type="text/javascript" src="js/dataListController.js" &&/script&
&script type="text/javascript" src="js/dataFormController.js" &&/script&
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
&!doctype html&&html ng-app="myApp"&&head& &title&&/title& &meta charset="UTF-8" /& &meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"& &link href="css/index.css" type="text/css" rel="stylesheet" /& &style type="text/css" & &/style&&/head&&body & &div class="wrapper" &
&div ng-controller="dataListController" class="dataListController"&
&div class="btnGroup"&
&button class="btn" ng-click="add()"&添加&/button&
&div class="dataListContainer"&
&li ng-repeat="item in list" &
&p class="title"&&a href="{{item.url}}" target="_blank" &{{item.text}}&/a&&/p&
&img src="{{item.thumb}}" class="thumb" /&
&p class="des"&{{item.des}}&/p&
&div class="simpleInfo"&
&span &评论({{item.comments}})&/span&
&span &喜欢({{item.loves}})&/span&
&span &时间({{item.time}})&/span&
&span &&a href="javascript:void(0)" ng-click="edit($index)" &编辑&/a&&/span&
&span &&a href="javascript:void(0)" ng-click="remove($index)" &删除&/a&&/span&
&div ng-show="isShow" ng-controller="dataFormController" class="dataFormController"&
&form role="form" name="form" class="form" ng-submit="submit()"&
&a href="javascript:void(0)" class="close" ng-click="close(false)"&close&/a&
&h2 class="title"&添加信息&/h2&
&div class="col3" &标题:&/div&
&div class="col7" &&input type="text" required ng-model="formData.text" /&&/div&
&div class="col3" &链接:&/div&
&div class="col7" &&input type="text" required ng-model="formData.url" /&&/div&
&div class="col3" &样图:&/div&
&div class="col7" &&input type="text" required ng-model="formData.thumb" /&&/div&
&div class="col3" &介绍:&/div&
&div class="col7" &&textarea required required ng-model="formData.des"&&/textarea&&/div&
&div class="text-center"&
&input ng-disabled="form.$invalid" class="btn" type="submit" value="提交"&
&/div& &/div& &script type="text/javascript" src="js/angular.js" &&/script& &script type="text/javascript" &
var app = angular.module('myApp', []); &/script& &script type="text/javascript" src="js/dataListController.js" &&/script& &script type="text/javascript" src="js/dataFormController.js" &&/script&&/body&&/html&
css/index.css
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-y:
font-size: 12
background: #F2F2F2;
.wrapper {
width: 100%;
height: 100%;
max-width: 1200
line-height: 2
text-decoration:
color: #00a67c;
margin: 0;
padding: 0;
list-style:
margin: 0;
padding: 0;
display: inline-
padding: 6px 12
margin-bottom: 0;
font-size: 14
font-weight: 400;
line-height: 1.;
text-align:
white-space:
vertical-align:
-ms-touch-action:
touch-action:
-webkit-user-select:
-moz-user-select:
-ms-user-select:
user-select:
background-image:
border-radius: 4
background-color: #5bc0
border-color: #46b8
.dataListContainer li {
margin-bottom: 10
background: #
padding: 10
.dataListContainer .thumb {
display: inline-
margin-right: 1
.dataListContainer .title {
font-size: 2
line-height: 2.5
.dataListContainer .des {
font-size: 1.5
line-height: 2
.dataListContainer .simpleInfo {
bottom: 10
.dataListContainer .simpleInfo&span {
margin-left: 2
.text-center {
text-align:
.dataListController, .dataFormController {
width: 100%;
height: 100%;
min-width: 500
background: #F2F2F2;
.dataListController {
overflow-y:
.dataFormController {
z-index: 5;
.dataFormController .required.ng-invalid {
box-shadow: 0px 0px 1
.dataFormController input[type=text], .dataFormController textarea {
width: 50%;
.dataFormController textarea {
.dataFormController li {
line-height: 2
margin-top: 1
.dataFormController li .col3 {
width: 30%;
text-align:
.dataFormController li .col7 {
width: 70%;
.dataFormController .title {
margin: 0;
padding: 0;
line-height: 4
text-align:
.dataFormController .close {
line-height: 1
text-align:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
body, html { width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
overflow-y: auto;
font-size: 12px;
background: #F2F2F2;}.wrapper { width: 100%;
height: 100%;
max-width: 1200px;
margin: auto;
line-height: 2rem; }a { text-decoration: none; color: #00a67c;}p { margin: 0; padding: 0;}ul { list-style: none; margin: 0; padding: 0;}.btn {&&&&display: inline-block;&&&&padding: 6px 12px;&&&&margin-bottom: 0;&&&&font-size: 14px;&&&&font-weight: 400;&&&&line-height: 1.;&&&&text-align: center;&&&&white-space: nowrap;&&&&vertical-align: middle;&&&&-ms-touch-action: manipulation;&&&&touch-action: manipulation;&&&&cursor: pointer;&&&&-webkit-user-select: none;&&&&-moz-user-select: none;&&&&-ms-user-select: none;&&&&user-select: none;&&&&background-image: none;&&&&border: 1px solid transparent;&&&&border-radius: 4px;&&&&color: #&&&&background-color: #5bc0&&&&border-color: #46b8}.dataListContainer li { clear: both;
margin-bottom: 10px; overflow: hidden; background: # padding: 10px; position: relative;}.dataListContainer .thumb { display: inline-block; float: left; margin-right: 1rem;}.dataListContainer .title { font-size: 2rem; line-height: 2.5rem;}.dataListContainer .des { font-size: 1.5rem;
line-height: 2rem; color: gray;}.dataListContainer .simpleInfo { position: absolute;
right: 10px;
bottom: 10px;
color: gray;}.dataListContainer .simpleInfo&span { margin-left: 2rem;}.text-center { text-align: center;}.dataListController, .dataFormController { position: absolute;
left: 0px; top: 0px;
width: 100%;
height: 100%;
overflow: hidden; min-width: 500px;
background: #F2F2F2;}.dataListController { overflow-y: auto;}.dataFormController { z-index: 5;}.dataFormController .required.ng-invalid { box-shadow: 0px 0px 1px red inset;}.dataFormController input[type=text], .dataFormController textarea { width: 50%;
height: 2rem;}.dataFormController textarea { height: 5rem;}.dataFormController li { line-height: 2rem;
margin-top: 1rem; overflow: hidden; clear: both;}.dataFormController li .col3 { width: 30%;
float: left;
text-align: right;}.dataFormController li .col7 { width: 70%;
float: left;}.dataFormController .title { margin: 0; padding: 0; line-height: 4rem;
text-align: center;}.dataFormController .close { position: absolute; right: 1rem; top: 1rem; width: 50px;
height: 1rem; line-height: 1rem; border: 1px solid gray; text-align: center;}
js/dataFormController.js
app.controller("dataFormController", function($scope, $window) {
var EDIT_MODE = 1;
var ADD_MODE = -1;
$scope.isShow =
$scope.$on("controller.add", function(event, data) {
$scope.isShow =
$scope.mode = ADD_MODE;
$scope.$on("controller.edit", function(event, e) {
$scope.isShow =
$scope.formData.text = e.formData.
$scope.formData.des = e.formData.
$scope.formData.thumb = e.formData.
$scope.formData.url = e.formData.
$scope.mode = e.
$scope.formData = {
thumb: "",
time: null,
comments: 0,
$scope.submit = function() {
var data = {
formData: {
text: $scope.formData.text,
des: $scope.formData.des,
thumb: $scope.formData.thumb,
url: $scope.formData.url
if($scope.mode != ADD_MODE) {
data.index = $scope.
$scope.$emit("controller.editData", data);
$scope.$emit("controller.addData", data);
$scope.close(true);
$scope.close = function(immediate) {
if(!immediate) {
if($scope.formData.text || $scope.formData.des || $scope.formData.thumb || $scope.formData.url) {
if(!$window.confirm("不保留已更改数据吗？")) {
$scope.formData.text = "";
$scope.formData.des = "";
$scope.formData.thumb = "";
$scope.formData.url = "";
$scope.isShow =
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
app.controller("dataFormController", function($scope, $window) { var EDIT_MODE = 1; var ADD_MODE = -1; $scope.isShow = false; $scope.$on("controller.add", function(event, data) {
$scope.isShow = true;
$scope.mode = ADD_MODE; }); $scope.$on("controller.edit", function(event, e) {
$scope.isShow = true;
$scope.formData.text = e.formData.text;
$scope.formData.des = e.formData.des;
$scope.formData.thumb = e.formData.thumb;
$scope.formData.url = e.formData.url;
$scope.mode = e.index; }); $scope.formData = {
thumb: "",
time: null,
comments: 0,
loves: 0 }; $scope.submit = function() {
var data = {
formData: {
text: $scope.formData.text,
des: $scope.formData.des,
thumb: $scope.formData.thumb,
url: $scope.formData.url
if($scope.mode != ADD_MODE) {
data.index = $scope.mode;
$scope.$emit("controller.editData", data);
$scope.$emit("controller.addData", data);
$scope.close(true); } $scope.close = function(immediate) {
if(!immediate) {
if($scope.formData.text || $scope.formData.des || $scope.formData.thumb || $scope.formData.url) {
if(!$window.confirm("不保留已更改数据吗？")) {
$scope.formData.text = "";
$scope.formData.des = "";
$scope.formData.thumb = "";
$scope.formData.url = "";
$scope.isShow = false; }});
js/dataListController.js
app.controller("dataListController", function($scope, $window) {
$scope.$on("controller.addData", function(event, e) {
var formData = e.formD
formData.time = "刚才";
formData.loves = ments = 0;
formData.id = createGuid();
$scope.list.push(formData);
$scope.$on("controller.editData", function(event, e) {
var formData = e.formD
formData.time = "刚才";
$scope.list[e.index] = formD
$scope.list = [
text: "Angular.js实现简单的表单验证",
des: "最近有点小忙，没怎么有时间专注看angular,但是空余时间还是要写点东西的，因为前几天一直在看angular,所以对双向绑定这个事情还是蛮感兴趣的，所以业余时间就自己想写一写，这个例子不兼容IE，在谷歌下面可以运行的。用的是ES5的属性。 demo: http://www.hu...",
url: "/archives/1044.html",
thumb: "/wp-content/themes/yusi1.0/timthumb.php?src=/wp-content/uploads/2015/09/QQ%E6%88%AA%E5%9B%BE05.png&h=123&w=200&q=90&zc=1&ct=1",
comments: 5,
time: "2天前"
text: "简单的实现了一下双向绑定的效果",
des: "前两天简单看了一下路由部分，自己凭着自己的感觉写了一个例子，这个例子可能跟大家之前看到的例子不太一样，因为我写了一个路由分发控制器，这个控制器里面，包含了所有的路由控制器处理过程： demo： /demo/angular/demo_1032...",
url: "/archives/1038.html",
thumb: "/wp-content/themes/yusi1.0/timthumb.php?src=/wp-content/themes/yusi1.0/img/pic/8.jpg&h=123&w=200&q=90&zc=1&ct=1",
comments: 3,
time: "1天前"
text: "Angular.js学习第六天",
des: "今天学习了一下Angular的过滤器功能，直接看一下demo吧，感受感受： demo地址: /demo/angular/demo_1021/ 上代码: index.html ",
url: "/archives/1032.html",
thumb: "/wp-content/themes/yusi1.0/timthumb.php?src=/wp-content/uploads/2015/09/QQ%E6%88%AA%E5%9B%BE05.png&h=123&w=200&q=90&zc=1&ct=1",
comments: 13,
loves: 14,
time: "刚才"
var curGuid = 3;
function createGuid() {
return ++curG
$scope.remove = function(index) {
if($window.confirm("确定要删除该条信息?")) {
$scope.list.splice(index, 1);
$scope.add = function() {
$scope.$broadcast("controller.add");
$scope.edit = function(index) {
$scope.$broadcast("controller.edit", {
formData: $scope.list[index],
index: index
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
app.controller("dataListController", function($scope, $window) { $scope.$on("controller.addData", function(event, e) {
var formData = e.formData;
formData.time = "刚才";
formData.loves = formData.comments = 0;
formData.id = createGuid();
$scope.list.push(formData);&& });&& $scope.$on("controller.editData", function(event, e) {
var formData = e.formData;
formData.time = "刚才";
$scope.list[e.index] = formData; }); $scope.list = [
text: "Angular.js实现简单的表单验证",
des: "最近有点小忙，没怎么有时间专注看angular,但是空余时间还是要写点东西的，因为前几天一直在看angular,所以对双向绑定这个事情还是蛮感兴趣的，所以业余时间就自己想写一写，这个例子不兼容IE，在谷歌下面可以运行的。用的是ES5的属性。 demo: http://www.hu...",
url: "/archives/1044.html",
thumb: "/wp-content/themes/yusi1.0/timthumb.php?src=/wp-content/uploads/2015/09/QQ%E6%88%AA%E5%9B%BE05.png&h=123&w=200&q=90&zc=1&ct=1",
comments: 5,
time: "2天前"
text: "简单的实现了一下双向绑定的效果",
des: "前两天简单看了一下路由部分，自己凭着自己的感觉写了一个例子，这个例子可能跟大家之前看到的例子不太一样，因为我写了一个路由分发控制器，这个控制器里面，包含了所有的路由控制器处理过程： demo： /demo/angular/demo_1032...",
url: "/archives/1038.html",
thumb: "/wp-content/themes/yusi1.0/timthumb.php?src=/wp-content/themes/yusi1.0/img/pic/8.jpg&h=123&w=200&q=90&zc=1&ct=1",
comments: 3,
time: "1天前"
text: "Angular.js学习第六天",
des: "今天学习了一下Angular的过滤器功能，直接看一下demo吧，感受感受： demo地址: /demo/angular/demo_1021/ 上代码: index.html ",
url: "/archives/1032.html",
thumb: "/wp-content/themes/yusi1.0/timthumb.php?src=/wp-content/uploads/2015/09/QQ%E6%88%AA%E5%9B%BE05.png&h=123&w=200&q=90&zc=1&ct=1",
comments: 13,
loves: 14,
time: "刚才"
} ]; var curGuid = 3; function createGuid() {
return ++curGuid; }& $scope.remove = function(index) {
if($window.confirm("确定要删除该条信息?")) {
$scope.list.splice(index, 1);
} } $scope.add = function() {
$scope.$broadcast("controller.add"); } $scope.edit = function(index) {
$scope.$broadcast("controller.edit", {
formData: $scope.list[index],
index: index
转载请注明： &
or分享 (0)}