我正在学习角度js并遇到http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/。我试图实现类似的，我的指令定义如下（message1，message2和message3有相同的代码）：
<pre>
var app = angular.module('app', []);
app.controller('msg', ['$scope', function($scope){
$scope.a = 5;
}]);
app.directive('message1', function($interpolate){
return{
template: '<div> a = {{a}} </div>',
compile: function(tElement, tAttributes){
console.log(tAttributes.text + " -In compile..");
return {
pre: function(scope, iElement, iAttributes, controller){
console.log(iAttributes.text + " -In pre..");
},
post: function(scope, iElement, iAttributes, controller){
console.log(iAttributes.text + " -In Post..");
}
}
},
controller: function($scope, $element, $attrs){
console.log($attrs.text + " -In controller..");
},
}
});
app.directive('message2', function($interpolate){
return{
template: '<div> a = {{a}} </div>',
compile: function(tElement, tAttributes){
console.log(tAttributes.text + " -In compile..");
return {
pre: function(scope, iElement, iAttributes, controller){
console.log(iAttributes.text + " -In pre..");
},
post: function(scope, iElement, iAttributes, controller){
console.log(iAttributes.text + " -In Post..");
}
}
},
controller: function($scope, $element, $attrs){
console.log($attrs.text + " -In controller..");
},
}
});
app.directive('message3', function($interpolate){
return{
template: '<div> a = {{a}} </div>',
compile: function(tElement, tAttributes){
console.log(tAttributes.text + " -In compile..");
return {
pre: function(scope, iElement, iAttributes, controller){
console.log(iAttributes.text + " -In pre..");
},
post: function(scope, iElement, iAttributes, controller){
console.log(iAttributes.text + " -In Post..");
}
}
},
controller: function($scope, $element, $attrs){
console.log($attrs.text + " -In controller..");
},
}
});
</pre>
我的HTML如下：
<body ng-app="app">
<div ng-controller="msg">
<div message1 text="first">
<div message2 text="..second">
<div message3 text="....third">
</div>
</div>
</div>
</div>
</body>
The console gives the following output:
[![enter image description here][1]][1]
What I would like to see is the following:
<pre>
first -In Compile..
..second -In Compile..
....third -In Compile..
first -In Controller..
first -In Pre..
..second -In Controller..
..second -In Pre..
....third -In Controller..
....third -In Pre..
....third -In Post..
..second -In Post..
first -In Post..
</pre>
[1]: http://i.stack.imgur.com/hGApa.png