angularjs 的controller和directive 的controller，link的執行順序
看模板代碼：
<!doctype html>
<html ng-app='plunker'>
<head>
</head>
<body>
<div ng-controller="MainCtrl">
<exampledirective1></exampledirective1>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</body></html>js代碼：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'First ';
});
app.directive('exampledirective1', function() {
return {
restrict: 'EACM',
template: '<p>Hello {{name}}!</p>',
replace:true,
controller: function($scope, $element){
$scope.name = $scope.name + "Second ";
},
link: function(scope, el, attr) {
scope.name = scope.name + "Third ";
}
}
});最終輸出 hello first second third
二：下面這個示例更加詳細清晰的闡述 指令執行內部的流程：
模板代碼：
<!doctype html>
<html ng-app="compilation">
<head>
<meta charset="utf-8">
<title>Compilation Demo</title>
<style type="text/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;
}
</style>
</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>
<script src="angular.js"></script>
<script src="main09.js"></script>
</body>
</html>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
};
});從輸出的結果便可以看出，先complie元素，再Link執行（controller -> pre-link -> post-link）