今天完成的事情：

今天又搞了一整天的小课堂，新的题目，没人做过，恰好我也不怎么懂，先学现卖。

明天计划的事情：

明天优化代码，做PPT，准备一些进复盘的事情

遇到的问题：

做小课堂，没遇到什么卡住的问题

收获：

Directive是AngularJ非常强大而有有用的功能之一。你可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下，需要用Directive有下面的情景：

1.使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。

2.抽象一个自定义组件，在其他地方进行重用。

今天重点讲解一下里面的compile和link属性

2.知识剖析

说到Directive指令，我们要先了解下Angular初始化的过程：

1脚本加载：加载Angular，

2查找ng-app：标识符找到应用绑定

3编译阶段：在这一阶段，Angular遍历DOM标识模板中所有注册的标志。对于每个标识符，基于标 识符规则（template，replace，transclude等等）改造DOM，然后如果编译函数存在就调用 它。结果是一个编译的template函数，它会调用从所有的标志符中搜集的link函数，compile就是这个阶段执行的，一般不推荐使用，会覆盖原有的compile

4链接阶段：为了让视图动起来，然后Angular为每个标识符运行link函数。Link函数通常在DOM或模型上创建监听器。这些监听器让视图和模型始终保持一致。

先看一段代码，代码是一个较为完整的模板

var myModule = angular.module(...);

myModule.directive('directiveName', function factory(injectables) {

return{

priority: 0,//优先级

template: '

',//需要添加的dom

templateUrl: 'directive.html',//把html写成独立的页面加载进来

replace: false,

transclude: false,

controller: 'SomeController'

restrict: 'A',//匹配类型(EAMC)

scope: false,//作用域类型

compile: function compile(tElement, tAttrs, transclude) {

return {

pre: function preLink(scope, iElement, iAttrs, controller) { ... },

post: function postLink(scope, iElement, iAttrs, controller) { ... }

}

},

link: function postLink(scope, iElement, iAttrs) { ... }

};

});

3.常见问题

link的四个参数分别是什么意思，怎么去用

4.解决方案

function link(scope, Element, Attrs, controller) { ... }

链接函数负责注册DOM事件和更新DOM。它是在模板被克隆之后执行的，它也是大部分指令逻辑代码编写的地方。

scope:指令需要监听的作用域。

Element:指令所在的元素。只有在postLink函数中对元素的子元素进行操作才是安全的，因为那时它们才已经全部链接好。

Attrs:实例属性，一个标准化的、所有声明在当前元素上的属性列表，这些属性在所有链接函数间是共享的。

controller:控制器实例，也就是当前指令通过require请求的指令direct2内部的controller。比如：direct2指令中的controller:function(){this.addStrength = function(){}}，那么，在当前指令的link函数中，你就可以通过controller.addStrength进行调用了。

5.编码实战

6.扩展思考

require是怎么用的?

varapp=angular.module('myApp',[]);

app.directive('outerDirective',function(){

return{

scope:{},

restrict:'AE',

controller:function($scope){

this.say=function(someDirective){

console.log('Got:'+someDirective.message);

};}};});

app.directive('innerDirective',function(){

return{

scope:{},

restrict:'AE',

require:'^outerDirective',

link:function(scope,elem,attrs,controllerInstance){

scope.message="Hi,leifeng";

controllerInstance.say(scope);

}};});

app.directive('innerDirective2',function(){

return{

scope:{},

restrict:'AE',

require:'^outerDirective',

link:function(scope,elem,attrs,controllerInstance){

scope.message="Hi,shushu";

controllerInstance.say(scope);

}};});

另外我们可以在require的参数值加上下面的某个前缀，这会改变查找控制器的行为：

（1）没有前缀，指令会在自身提供的控制器中进行查找，如果找不到任何控制器，则会抛出一个error

（2）？如果在当前的指令没有找到所需的控制器，则会将null传给link连接函数的第四个参数

（3）^如果在当前的指令没有找到所需的控制器，则会查找父元素的控制器

（4）?^组合

参考文献

angular权威教程pdf

AngularJS指令参数详解

8.更多讨论

什么时候用controller，什么时候用link

上面例子中的指令innerDirective和指令innerDirective2复用了定义在指令outerDirective的controller中的方法

也进一步说明了，指令中的controller是用来让不同指令间通信用的。

鸣谢

感谢大家观看

BY :隋鑫