一.指令中controller与link的区别
我们都知道在ng的指令中，返回的对象中有两个重要的属性：
// link function
{
link: function(scope,iElem,iAttrs,ctrl) { ... },controller: function($scope,$element,$attrs) { ... }
}
这两个都可以获取到作用域，元素，属性等引用，也都会执行一次，在我还是个ng菜鸟的时候，当然，现在也还是，当我每次想要扩展个自定义指令时，脑海中总是萦绕着“where the fuck should I put my code?”，在controller，还是link function中呢。
简短的回答是：优先放在 link function 中。当然啦，这要取决于你想要你的代码什么时候运行。
Before compilation? – Controller After compilation？ - Link function
另外，他们的基本区别是：
a.控制器可以暴露一个API，而link可以通过require与其他的指令控制器交互
b.所以如果要开放出一个API给其他指令用就写在controller中，否则写在link中
二.执行先后问题
首先，看下面一个很有趣的示例：log-compile指令。
index.html
<!doctype html> <html ng-app="compilation"> <head> <Meta charset="utf-8"> <title>Compilation Demo</title> <link rel="stylesheet" href="style.css"> <script src="http://code.angularjs.org/1.1.1/angular.js"></script> <script src="app.js"></script> </head> <body> <div log-compile="parent"> <div log-compile="..child 1"> <div log-compile="....child 1 a"></div> <div log-compile="....child 1 b"></div> </div> <div log-compile="..child 2"> <div log-compile="....child 2 a"></div> <div log-compile="....child 2 b"></div> </div> </div> <!-- LOG --> <pre>{{log}}</pre> </body> </html>
app.js
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,attributes) {
element.prepend(attributes.logCompile);
$rootScope.log = $rootScope.log + (attributes.logCompile + ' (post-link)\n');
}
};
}
};
})
.directive('terminate',function() {
return {
terminal: true
};
});
style.css
div {
padding: 5px;
margin: 5px;
background-color: #EEE;
border: 1px solid #BBB;
}
div > div {
background-color: #DDD;
}
div > div > div {
background-color: #CCC;
}
ol {
list-style: decimal;
margin-left: 30px;
}
运行结果：
通过这个实例，我们可以知道，子级指令的所有 link function ：包括 pre 和 post 两个link都会在父级的post link之前被执行，我们通常所说的link function，其实是 post link 的快捷方式罢了。
所以，像下面这个例子中，这样用，是会有问题的：
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<Meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.1.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<example-directive></example-directive>
(above should actually say "hi there",not "bar")
</body>
</html>
app.js
var app = angular.module('plunker',[]);
app.controller('MainCtrl',function($scope,$element) {
});
app.directive('exampleDirective',function() {
return {
restrict: 'E',template: '<child-directive></child-directive>',$element){
// this will not work,since the child directives link
// function was not yet run
$element.find('pre').text('hi there!');
},link: function(scope,el){
// the logic really belongs in link,as the child directive
// uncomment this line to fix the problem
// el.find('pre').text('hi there!')
}
}
});
app.directive('childDirective',function() {
return {
restrict: 'E',template: '<h1>bar</h1>',replace: true,link: function($scope,attr){
// some awesome jquery pluggin which replaces things and bits
$element.replaceWith(angular.element('<pre>' + $element.text() + '</pre>'));
}
}
});
运行结果：
说明 link 在 ctrl 之后执行的一个例子，上面这个例子非常给力，值得学习。
