angularJS directive中的controller和link function辨析
在angularJS中,你有一系列的view,负责将数据渲染给用户;你有一些controller,负责管理$scope(view model)并且暴露相关behavior(通过$scope定义)给到view;你有一些directive,负责将user interaction和$scope behavious link起来。但是还有一样东西: a directive controller.这个directive controller子一个directive的context中定义,但是它又可以被injected到其他的directives中作为一种便利化inter-directive communication的方法。
angularJS中directive应该是最重要最强大的了,在ddo中,有两个地方可以引入自定义的功能,一个是controller属性,一个是link属性,directive的这两个属性到底有什么区别呢?我们的代码到底应该放到directive的controller还是link属性中去呢?
问一下自己:我希望这段代码什么时间点去运行呢?对这个问题的回答决定了你应该讲代码放到哪里:
- 在compilation之前运行? - 放到controller属性中去
- 希望暴露一个API给其他directives? -放到controller属性中去定义API
- 在compilation之后运行? - 放到link属性中
angular在compile,link,controller被编译的时间顺序:

angular.module('compilation', [])
.directive('logCompile', function($rootScope) {
$rootScope.log = "";
return {
controller: function($scope, $attrs) {
$rootScope.log = $rootScope.log + ($attrs.logCompile + ' (controller)\n');
},
compile: function compile(element, attributes) {
$rootScope.log = $rootScope.log + (attributes.logCompile + ' (compile)\n');
return {
pre: function preLink(scope, element, attributes) {
$rootScope.log = $rootScope.log + (attributes.logCompile + ' (pre-link)\n');
},
post: function postLink(scope, element, attributes) {
element.prepend(attributes.logCompile);
$rootScope.log = $rootScope.log + (attributes.logCompile + ' (post-link)\n');
}
};
}
};
})
.directive('terminate', function() {
return {
terminal: true
};
});
http://jasonmore.net/angular-js-directives-difference-controller-link/
angularJS directive中的controller和link function辨析的更多相关文章
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解(转)
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- Angular1.0 在Directive中调用Controller的方法
Controller中定义了$scope.method = function(){} Directive中需要引入$scope http://stackoverflow.com/questions/2 ...
- angularjs directive中@ = &使用详解
这段时间在学习angularjs,对directive指令的绑定策略弄了好久才明白,现在做下笔记方便以后查阅,若有错误欢迎指出. 为了使新的指令作用域能访问当前的作用域的一些属性,通常会使用@.=.& ...
- AngularJS之指令中controller与link(十二)
前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...
- Directive Controller And Link Timing In AngularJS
I've talked about the timing of directives in AngularJS a few times before. But, it's a rather compl ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
随机推荐
- rocketmq sql解析过滤
activemq rocketmq kafka robbitmq 公司 apache alibaba LinkedIn Pivotal 编写语言 java Erlang 客户端支持 其他协议支持 mq ...
- CentOS&.NET Core初试系列
目的 对前段时间学习.NET Core的知识进行一次入门篇的总结,希望加深印象同时帮助刚学同学少走一些坑. 目录 CentOS的安装和网卡的配置 安装.NET Core SDK和发布网站 Nginx的 ...
- WinScp结合Putty在Windows与UNIX之间进行文件传输
1. 关于传输协议: SSH Secure Shell安全外壳协议 SFTP Secure File Transfer Protocal安全文件传送协议 2. WinScp与Putty的作用: Put ...
- oracle 表空间tablespace
一.Oracle 表空间的组成 Everoone knows Oracle数据库真正存放数据的是数据文件,Oracle表空间是逻辑上的概念,他在物理上是并不存在的,把多个DataFile合并到一起就是 ...
- PyCharm+cmd中使用Anaconda 与 新建Python环境(Windows)
PyCharm配置Anaconda Anaconda的安装在网上已经有了,这里主要讲之前已经安装了已经配置好Python环境变量以及PyCharm的情况下,使用Anaconda. 即在PyCharm中 ...
- how to be an efficient man
"This Monday I was invited to do a presentation on this Friday, and today is Friday. I am going ...
- CCF ISBN号码 201312-2
ISBN号码 问题描述 试题编号: 201312-2 试题名称: ISBN号码 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 每一本正式出版的图书都有一个ISBN号码与之对应 ...
- linq——常用方法
take 前几 skip 跳过前几 takeWhile var firstNumbersLessThan6 = numbers.TakeWhile(n => n < 6); / ...
- MySql数据库与JDBC编程二
DML语法语句:主要操作数据表中的数据,完成插入新数据,修改已有数据,删除不要的数据的任务 1,insert into 语句 用于向指定表插入数据,一次只能插入一条记录:insert into tab ...
- docker 安装ElasticSearch的中文分词器IK
首先确保ElasticSearch镜像已经启动 安装插件 方式一:在线安装 进入容器 docker exec -it elasticsearch /bin/bash 在线下载并安装 ./bin/ela ...