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

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

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

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

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

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

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

app.directive('items', function() {
    return {
        scope: {
            delete: '&',
            edit: '&',
            list: '=',
            search: '=',
            login: '='
        },
        controller: 'AppController',
        link: function() {
//            console.log('hello');
        },
        templateUrl: 'message-item.html'
    }
});

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

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

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

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

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

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识, 代码段, 语法, AngularJS

仅有一条评论

  1. xxxx
    alert(112321313);

添加新评论