在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辨析的更多相关文章

  1. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  2. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  3. angularjs指令中的compile与link函数详解(转)

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

  4. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  5. Angular1.0 在Directive中调用Controller的方法

    Controller中定义了$scope.method = function(){} Directive中需要引入$scope http://stackoverflow.com/questions/2 ...

  6. angularjs directive中@ = &使用详解

    这段时间在学习angularjs,对directive指令的绑定策略弄了好久才明白,现在做下笔记方便以后查阅,若有错误欢迎指出. 为了使新的指令作用域能访问当前的作用域的一些属性,通常会使用@.=.& ...

  7. AngularJS之指令中controller与link(十二)

    前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...

  8. 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 ...

  9. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

随机推荐

  1. 《大数据日知录》读书笔记-ch16机器学习:分布式算法

    计算广告:逻辑回归 千次展示收益eCPM(Effective Cost Per Mille) eCPM= CTR * BidPrice 优化算法 训练数据使用:在线学习(online learning ...

  2. STM32的固件升级(RTT

    STM32 通用 Bootloader ,让 OTA 更加 Easy 目前支持F1/F4,在线制作bootloader,准备固件升级,是RTT的云设备管理平台 https://mp.weixin.qq ...

  3. Github提交PullRequest

    Github提交PullRequest工作流程: 以Kubernetes为例 1.   Fork Kubernetes到自己的Github目录 访问:https://github.com/kubern ...

  4. ubuntu系统复制到其他地方或克隆后,如何正确修改IP及MAC地址的解决方案(图文详解)

    修改ip地址 永久修改MAC地址 方法一: 1)编辑“/etc/init.d/rc.local”文件(sudo gedit /etc/init.d/rc.local) 2)在此配置文件的最后面加上如( ...

  5. Lvmetad is not active yet错误处理

    Lvmetad is not active yet错误处理 问题现象 今天早上把之前的服务器关机换了一个位置,之后启动后出现错误信息: lvmetad is not active yet; using ...

  6. ormLite注解小记

    注解是特殊的代码标志已在Java版本开始,要指定什么类和字段存储在数据库中,ORMLite支持其自己的注解(@ DatabaseTable @ DatabaseField)或更多的标准注解从javax ...

  7. .NET环境下的DPAPI加密编程

    Windows的本地加密保护机制提供了简单的调用接口,密钥的生成.保护等事项一概由系统来处理,其编程接口称为DPAPI.这一加密保护机制的边界是用户登录帐户或者本地计算机系统,使用操作系统设定的加密处 ...

  8. 【转】C#中的委托,匿名方法和Lambda表达式

    简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...

  9. ElasticSearch 6.2.3 Windows10 安装

    一.安装Es 1.安装java,最新版本的ElasticSearch 需要java8 版本,因此需要先去Oracle官网下载jdk,下载之后就直接安装: 2.安装过程中将其安装目录copy下来:C:\ ...

  10. awk如何替换一个字符串的第n个字符?

    方法一: echo "abcdefg" | awk 'BEGIN{FS=OFS=""}$4="h"'    // ""可 ...