app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: true,
template: '<p style="Hello World',
link: function(scope, elem, attrs) {
elem.bind('click', function() {
elem.css('background-color', 'white');
scope.$apply(function() {
scope.color = "white";
});
});
elem.bind('mouseover', function() {
elem.css('cursor', 'pointer');
});
}
};
});
咱们注意到指令定义中的 link 函数。 它有三个参数：
- scope – 指令的scope。在咱们的例子中，指令的scope就是父controller的scope。
- elem – 指令的jQLite(jQuery的子集)包装DOM元素。若是你在引入AngularJS以前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。因为这个元素已经被jQuery/jQLite包装了，因此咱们就在进行DOM操做的时候就不须要再使用 $()来进行包装。
- attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子，你给一个HTML元素添加了一些属性：，那么能够在 link 函数中经过 attrs.someAttribute 来使用它。
link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。在上面的指令代码片断中，咱们添加了两个事件， click，和 mouseover。click 处理函数用来重置 <p> 的背景色，而 mouseover 处理函数改变鼠标为 pointer。在模板中有一个表达式 {{color}}，当父scope中的 color 发生变化时，它用来改变 Hello World 文字的背景色。 这个 plunker 演示了这些概念。
compile函数
compile 函数在 link 函数被执行以前用来作一些DOM改造。它接收下面的参数：函数
- tElement – 指令所在的元素
- attrs – 元素上赋予的参数的标准化列表
要注意的是 compile 函数不能访问 scope，而且必须返回一个 link 函数。可是若是没有设置 compile 函数，你能够正常地配置 link 函数，（有了compile，就不能用link，link函数由compile返回）。compile函数能够写成以下的形式：性能
app.directive('test', function() {spa
return {
compile: function(tElem,attrs) {
//do optional DOM transformation here
return function(scope,elem,attrs) {
//linking function here
};
}
};
});
大多数的状况下，你只须要使用 link 函数。这是由于大部分的指令只须要考虑注册事件监听、监视模型、以及更新DOM等，这些均可以在 link 函数中完成。 可是对于像 ng-repeat 之类的指令，须要克隆和重复 DOM 元素屡次，在 link 函数执行以前由 compile 函数来完成。这就带来了一个问题，为何咱们须要两个分开的函数来完成生成过程，为何不能只使用一个？要回答好这个问题，咱们须要理解指令在Angular中是如何被编译的！
指令是如何被编译的
当应用引导启动的时候，Angular开始使用 $compile 服务遍历DOM元素。这个服务基于注册过的指令在标记文本中搜索指令。一旦全部的指令都被识别后，Angular执行他们的 compile 方法。如前面所讲的，compile 方法返回一个 link 函数，被添加到稍后执行的 link 函数列表中。这被称为编译阶段。若是一个指令须要被克隆不少次（好比 ng-repeat），compile函数只在编译阶段被执行一次，复制这些模板，可是link 函数会针对每一个被复制的实例被执行。因此分开处理，让咱们在性能上有必定的提升。这也说明了为何在 compile 函数中不能访问到scope对象。 在编译阶段以后，就开始了连接（linking）阶段。在这个阶段，全部收集的 link 函数将被一一执行。指令创造出来的模板会在正确的scope下被解析和处理，而后返回具备事件响应的真实的DOM节点。rest
改变指令的Scope
默认状况下，指令获取它父节点的controller的scope。但这并不适用于全部状况。若是将父controller的scope暴露给指令，那么他们能够随意地修改 scope 的属性。在某些状况下，你的指令但愿可以添加一些仅限内部使用的属性和方法。若是咱们在父的scope中添加，会污染父scope。 其实咱们还有两种选择：orm
- 一个子scope – 这个scope原型继承子父scope。
- 一个隔离的scope – 一个孤立存在不继承自父scope的scope。
这样的scope能够经过指令定义对象中 scope 属性来配置。下面的代码片断是一个例子：对象
app.directive('helloWorld', function() {继承
return {
scope: true, // use a child scope that inherits from parent
restrict: 'AE',
replace: 'true',
template: '<h3>Hello World!!</h3>'
};
});
上面的代码，让Angular给指令建立一个继承自父socpe的新的子scope。 另一个选择，隔离的scope：
app.directive('helloWorld', function() {
return {
scope: {}, // use a new isolated scope
restrict: 'AE',
replace: 'true',
template: '<h3>Hello World!!</h3>'
};
});
这个指令使用了一个隔离的scope。隔离的scope在咱们想要建立可重用的指令的时候是很是有好处的。经过使用隔离的scope，咱们可以保证咱们的指令是自包含的，能够被很容易的插入到HTML应用中。 它内部不能访问父的scope，所保证了父scope不被污染。 在咱们的 helloWorld 指令例子中，若是咱们将 scope 设置成 {}，那么上面的代码将不会工做。 它会建立一个新的隔离的scope，那么相应的表达式 {{color}} 会指向到这个新的scope中，它的值将是 undefined. 使用隔离的scope并不意味着咱们彻底不能访问父scope的属性。