用angularJS做框架開發也有一段時間了，一開始一直搞不清指令和控制器是如何交互的。後來查閱了諸多資料，借鑑了很多開發前輩的資料，對他們之間是如何交互也理清了一點頭緒，現在簡單分享一下，如果有說的不對的地方還請諸位前輩指教
在這裏，我僅僅以AngularJS 指令中的‘@’來做解釋。
先給出靜態頁面（因爲寫的比較簡單，所以我就省略了樣式）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/test.css"/>
<script type="text/javascript" src="vendor/angular/angular.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<span> 這是個demo。後面是測試結果：</span>
<my-test attr="{{value}}"></my-test>
</div>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
test.js：
var myNodule = angular.module('myModule',[]);
myNodule.controller('myController',['$scope',function($scope){
$scope.value = "Gecko";
}]);
myNodule.directive('myTest',function(){
return{
restrict:'E',
scope:{
attr:'@'
},
template:'<span>{{attr}}</span>'
}
});給出結果：
我理解的指令和控制器的交互原理大致分爲三步：
1. 指令通過‘@’實現與HTML頁面元素的關聯；
2. 控制器中又通過$scope實現了與頁面元素的聯繫；
3. 從而藉助HTML頁面。建立起了指令與控制器之間的聯繫。
不知道自己理解的對不對，如果理解的不對，歡迎前輩指教更正。也歡迎大家與我一起交流Angular的知識~謝謝！