在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. 使用app-inspector查看元素,无法连接到手机,提示错误{ Error: Command failed ……forward tcp:9001 tcp:9001错误解决

    在学习使用app-inspector查看元素时,碰到一个问题.在cmd窗口执行命令app-inspector --port 5678 -u 85EABNFSU53R --verbose  ,连接不到手 ...

  2. es第十篇:Elasticsearch for Apache Hadoop

    es for apache hadoop(elasticsearch-hadoop.jar)允许hadoop作业(mapreduce.hive.pig.cascading.spark)与es交互. A ...

  3. C# 实现IP视频监控(摄像头)画面推送(简单的不能再简单的DEMO)

    最近继续在家休息,在完成上一个Python抓取某音乐网站爬虫后,琢磨着实现一个基于HTTP推送的 IP视频监控,比如外出的时候,在家里 开启一个监控端(摄像头+服务端),可以看到实时画面,如果再加上自 ...

  4. 【linux】在ubuntu中使用apt-get安装oracle jdk6

    在Ubuntu 12.04 LTS上安装JDK6本身并不复杂,只是目前较新版本的Ubuntu已经不支持直接通过apt-get安装了.因此,需要从Oracle官方网站下载安装包进行安装. 从Oracle ...

  5. 16位模式/32位模式下PUSH指令探究——《x86汇编语言:从实模式到保护模式》读书笔记16

    一.Intel 32 位处理器的工作模式 如上图所示,Intel 32 位处理器有3种工作模式. (1)实模式:工作方式相当于一个8086 (2)保护模式:提供支持多任务环境的工作方式,建立保护机制 ...

  6. jQuery 的动画效果图片----隐藏打开方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. java启动线程时 extends与implements的一个差异

    java extends与implements在使用时的一个差异: Implements: public class ThreadImplementsTest implements Runnable{ ...

  8. 【Hadoop系列】linux下 root用户免密码登录远程主机 ssh

    SSH原理:[Hadoop系列]linux SSH原理解析 操作环境: CentOS 6.5 操作对象: 用户A主机和远程主机B 正文部分:斜体加粗代表linux指令. linux下 非root用户免 ...

  9. 樹莓派3B運行.Net Core2.1 Web 項目

    安裝.Net Core 運行時和SDK(非必選) 下載地址 安裝 # 安裝運行時 sudo apt-get -y update # Install the packages necessary for ...

  10. ps命令详解加例子

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...