文档章节

angularJS指令中的controller和controllerAs

孟飞阳
 孟飞阳
发布于 2017/04/25 14:39
字数 175
阅读 18
收藏 0

自定义指令中还可以定义controller属性,是一个function,可以在其中定义数据和方法,可以提供给该指令的link内的方法使用。

示例的html:

<div ng-app="myApp">  
    <div ng-controller="firstController">  
        <div book-list></div>  
    </div>  
</div>  
angular.module('myApp',[])  
.directive('bookList',function(){  
    return {  
        restrict:'ECAM',  
        //此处定义了该指令的controller属性  
        controller:function($scope){  
            $scope.books=[  
                {name:'php'},  
                {name:'javascript'},  
                {name:'java'}  
            ];  
            this.addBook=function(){       //或者 scope.addBook=...  
                alert('test');  
            }  
        },  
        controllerAs:'bookListController', //给当前controller起个名称  
        template:'<ul><li ng-repeat="book in books">{{ book.name }}</li></ul>',  
        replace:true,  
        //link中注入 bookListController ,就可以使用它的方法了  
        link:function(scope,iElement,iAttrs,bookListController){  
            iElement.on('click',bookListController.addBook);  
        }  
    }  
})  
.controller('firstController',['$scope',function($scope){  
}])  

执行结果:

点击则触发了link定义的点击事件:

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 208
博文 981
码字总数 546304
作品 5
朝阳
个人站长
私信 提问
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608
2018/04/19
0
0
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
0
0
什么时候应该使用 Angular 2

人们常常会问--“我应该在我的新项目中要使用 Angular 2吗?” 假使该项目不需要被准备好几个月? 假使它是一个小项目,或者一个概念验证? 可能你已经在家中正在玩弄Angular 2,但是在工作中...

oschina
2016/01/08
8.5K
13
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

徒手撸一个简单的RPC框架

徒手撸一个简单的RPC框架 之前在牛逼哄哄的 RPC 框架,底层到底什么原理得知了RPC(远程过程调用)简单来说就是调用远程的服务就像调用本地方法一样,其中用到的知识有序列化和反序列化、动态...

不学无数的程序员
32分钟前
1
0
Java 面试题目最全集合1000+ 大放送,能答对70%就去BATJTMD试试~

2019,相对往年我们会发现今年猎头电话少了,大部分企业年终奖缩水,加薪幅度也不如往年,选择好offer就要趁早,现在开始准备吧,刷一波Java面试题,能回答70%就去BATJTMD大胆试试~ 以下是2...

mikechen优知
37分钟前
2
0
玩转Koa之核心原理分析

Koa作为下一代Web开发框架,不仅让我们体验到了async/await语法带来同步方式书写异步代码的酸爽,而且本身简洁的特点,更加利于开发者结合业务本身进行扩展。 本文从以下几个方面解读Koa源码...

前端小攻略
39分钟前
1
0
分布式之数据库和缓存双写一致性方案解析

为什么写这篇文章? 首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用。在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作。 ![] 但是在更新缓存方面,对于更新...

hensemlee
今天
5
0
怎么学习大数据

最近有很多人在找,大数据是怎么学?需要学什么技术以及这些技术的学习顺序是什么?今天有时间我把个问题总结成文章分享给大家。 那大数据处理技术怎么学习呢?首先我们要学习Java语言和Lin...

董黎明
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部