前言：
前段時間我們學習了angular的指令，他通過ECMA的方式創建元素，可以讓我們共用這些元素，我們也知道可以通過 link的方法給這個指令添加一些動作事件，本節，我們將寫入和讓angular的指令能和控制器進行交互。
1，指令和控制器的交互
<!DOCTYPE html>
<html ng-app="MyController">
<head>
<meta charset="utf-8">
<title>指令復用</title>
</head>
<body>
<div ng-controller="MyCtrl">
<loader>滑動加載</loader>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-controller.js"></script>
</html>
上面的代碼平淡無奇，有個控制器有個指令（loader），下面可以看到我們通過 directive創建了這個指令，並且我們通過link的方法給他賦值鼠標事件(mouseenter)。
var myModule = angular.module('MyController',[]); myModule.controller('MyCtrl',function($scope){ $scope.loadData = function(){ console.log("加載數據..."); } }) myModule.directive('loader',function(){ return{ restrict:'AE', link:function(scope,element,attr){ element.bind('mouseenter',function(){ scope.loadData(); }) } } })
我們來看看運行的結果，ok，我們打印出來 ”加載數據...“。
2，多個控制器如何公用一個指令？
我們創建指令的目的就是在於，能夠復用它，當然這也是MVC的終極思想。
我們的代碼也發生了一些變化
<!DOCTYPE html>
<html ng-app="MyController">
<head>
<meta charset="utf-8">
<title>指令復用</title>
</head>
<body>
<div ng-controller="MyCtrl">
<loader loadDataFn="loadData()">滑動加載</loader>
</div>
<div ng-controller="MyCtr2">
<loader loadDataFn="loadData2()">滑動加載2</loader>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-controller.js"></script>
</html>
首先，我們創建了兩個控制器 MyCtr1 和 MyCtr2，同時呢，我們給 loader 這個指令，加了一個自定義的屬性叫 loadDataFn，給他賦的值是下面js中的兩個對應控制器中的方法loadData()和loadData2()；
var myModule = angular.module('MyController',[]); myModule.controller('MyCtrl',function($scope){ $scope.loadData = function(){ console.log("加載數據..."); } }) myModule.controller('MyCtr2',function($scope){ $scope.loadData2 = function(){ console.log("加載數據2..."); } }) myModule.directive('loader',function(){ return{ restrict:'AE', link:function(scope,element,attr){ element.bind('mouseenter',function(){ // scope.loadData();
// scope.$apply("loadData()");
scope.$apply(attr.loaddatafn); }) } } })
當然，在指令的 link方法中我們也做了改變，link方法呢，給我提供了四個參數:scope、element、attr和父控制器。我們給元素綁定事件也是通過參數中的 element.bind()完成的，我們也可以通過 attr 屬性獲取指令上的屬性，然后通過$apply的方法來完成調用就好了。在此要提交大家的是，我們在獲取指令元素上的屬性的時候，一定要注意，我們要把屬性的名字寫成小寫的，這是angularJS的坑。
