CodeSky 代码之空

随手记录自己的学习过程

AngularJS directive如何进行ng-repeat的遍历输出

2015-08-20 14:29分类: JavaScript评论: 1

昨天真的依旧踩到了不少坑,这是其中的一个。

在directive里,其实scope究竟是拿来干嘛的,就目前我看来可以绑定传值,那么为什么我们要传值。

经过这次坑,总算是明白了不少。

Template或者TemplateUrl可以说是一个封闭的环境,换言之,你在外面用的在这里并不能用,如果需要用,要怎么办呢?用Scope把值传进去。

所以需要用ng-repeat的时候,最好的方法其实是将ng-repeat以template的形式进行遍历,假设我们有一个需要遍历的变量message,在外围我们使用: list="message"

接下来我们对list进行双向绑定,也就是说两边随便哪一边变了他都会改变,用=:

1app.directive('items', function() {
2	return {
3		scope: {
4			delete: '&',
5			edit: '&',
6			list: '=',
7			search: '=',
8			login: '='
9		},
10		controller: 'AppController',
11		link: function() {
12//			console.log('hello');
13		},
14		templateUrl: 'message-item.html'
15	}
16});
17

最后方法一样: <li ng-repeat="value in list | filter: search">

当然,我的search也是在html文件里的,不在templates中,所以我们也需要从外围用一个attr把它传进来。这里同时更深入的理解了一下directive。

那么接下来我们面临新的挑战——是否可以绑定ng-click事件呢?在jQuery里,我们是通过遍历append,用this指针来定义click事件,但在Angular里,并不鼓励我们用DOM操作。

此时该怎么办?写在AngularJS里是否安全,是否独立,是个严重的问题。

不过我们看过源代码之后就能回答这两个问题了,解决方法很简单,照样传参,因为有个Compiler的过程,而不是跟Click事件直接执行,所以非常安全。

评论 (1)

xxxx2017年3月25日 16:00

<script>alert(112321313);</script>