在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. pandas中数据框的一些常见用法

    1.创建数据框或读取外部csv文件 创建数据框数据 """ 设计数据 """ import pandas as pd data = {&qu ...

  2. python 使用缓存加快运算

    from functools import lru_cache import time from functools import wraps def clock(func): @wraps(func ...

  3. android 报错: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/animation/AnimatorCompatHelper;

    在使用SmartRefreshLayout时,报 java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v4/a ...

  4. 在ionic3自定义组件中使用官方组件

    先创建组件: ionic g component xxx 在components里面如下图引入

  5. UI设计黄金法则

    1. 网页用户界面(WUI - web user interface) 最佳设计经验与准则 以主页为基准,建立标准的层级结构 保持布局的一致性 将大版本的内容或过于复杂的任务分解为多个页面显示 将导航 ...

  6. Jmeter创建web测试计划

    创建web测试计划 在这一章,我们将学习如何创建基本的测试计划来测试一个web网站.您将创建五个用户并发送请求到JMeter网站的两个页面.同时,设置用户运行测试两次.因此,请求的总数是(5个用户)x ...

  7. oracle系统包——dbms_transaction用法

    用于在过程,函数和包中执行sql事务处理语句. 1.read_only用于开始只读事务,其作用与sql语句set transaction read only完全相同2.read_write用于开始读写 ...

  8. WPF的RadioButton--单选框

    1. 使用, 显示的内容改为Content属性 <RadioButton Content="boy"/> 2. 要使用分组,就是用 GroupName属性 <Ra ...

  9. [转]js和jquery获取窗体高度

    JQuery获取浏览器窗口宽高,文档宽高 2010-01-20 08:59<script type="text/javascript">$(document).read ...

  10. .netCore2.0 部分视图ViewComponent

    .netCore 中部分视图相当于轻量级的控制器,建立方法类似控制器,需要建立文件夹Components,然后再建立视图组件控制器,规则和视图控制器类似,默认结尾为ViewComponent,如Abc ...