require - 請求另外的controller，傳入當前directive的link function中。require需要傳入一個directive controller的名稱。如果找不到這個名稱對應的controller，那么將會拋出一個error。名稱可以加入以下前綴：
? - 不要拋出異常。這使這個依賴變為一個可選項。
^ - 允許查找父元素的controller
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <link rel="stylesheet" href="bootstrap.min.css"> 6 <script src="jquery.min.js"></script> 7 <script src="angular.min.js"></script> 8 <script src="bootstrap.min.js"></script> 9 <script type="text/javascript"> 10 var myapp = angular.module("myapp", []); 11 myapp.controller("MyController", ['$scope', function($scope) { 12 $scope.name = "mario"; 13 $scope.age = "13"; 14 $scope.send = function() { 15 console.log('.............'); 16 }; 17 }]); 18 myapp.directive("parent", function() { 19 return { 20 restrict: 'E', 21 scope:{}, 22 controller: function() { 23 // this.data = ['1', '2', '3', '4', '5']; 24 data = ['1', '2', '3', '4', '5']; 25 this.click = function() { 26 data.pop(); 27 console.log(data); 28 }; 29 }, 30 link: function(scope, elem, attrs) { 31 scope.name = '123'; 32 }, 33 template: '<span>{{name}}<div ng-transclude></div></span>', 34 replace: true, 35 transclude: true 36 }; 37 }); 38 myapp.directive("son", function() { 39 return { 40 restrict: 'E', 41 repalce: true, 42 require: '^?parent', 43 template: '<div ng-click="sonClick()">sonClick</div>', 44 link: function(scope, elem, atts, ctrl) { 45 scope.sonClick = ctrl.click; 46 // tmp = ctrl.data; 47 // console.log(tmp); 48 // ctrl.data.pop(); 49 } 50 }; 51 }); 52 myapp.directive("daughter", function() { 53 return { 54 restrict: 'E', 55 repalce: true, 56 require: '^?parent', 57 template: '<div ng-click="daughterClick()">daughterClick</div>', 58 link: function(scope, elem, atts, ctrl) { 59 scope.daughterClick = ctrl.click; 60 // tmp = ctrl.data; 61 // console.log(tmp); 62 } 63 }; 64 }); 65 </script> 66 <style type="text/css"> 67 </style> 68 </head> 69 <body ng-app="myapp"> 70 <div class="container" ng-controller="MyController"> 71 <parent> 72 <son></son> 73 <daughter></daughter> 74 </parent> 75 </div> 76 </body> 77 </html>
require之后可以在link中使用第四個參數ｃｔｒｌ調用到依賴的指令的controller中的方法變量．
可以看到son, daughter都可以調用到parent中的click函數，並且操作同一個data．可以發現click前面用this，修飾．
data如果也使用this．修飾，那么結果是一樣的，可以被其依賴的指令使用ctrl.data訪問到.
所以當幾個指令有共同的方法時可以抽取到一個指令中，然后ｒｅｑｕｉｒｅ一下．
上面的寫法是
<parent name="123">
<son></son>
<daughter></daughter>
</parent>
按照上面的說法是使用父元素的controller，所以^不可少，寫法也必須那么寫才可以調到ｃｌｉｃｋ函數.
補充
引入其他指令並注入到控制器中，並作為當前指令的鏈接函數的第四個參數。require使用字符串或數組元素來傳入指令。如果是數組，注入的參數是一個相應順序的數組。如果這樣的指令沒有被找到，或者該指令沒有控制器， 就會報錯。 require參數可以加一些前綴：
- (沒有前綴)如果沒有前綴，指令將會在自身所提供的控制器中進行查找，如果沒有找到任何控制器就拋出一個錯誤。
- ? 如果在當前指令中沒有找到所需要的控制器，會將null作為傳給link函數的第四個參數。
- ^ 如果添加了^前綴，指令會在上游的指令鏈中查找require參數所指定的控制器。
- ?^ 將前面兩個選項的行為組合起來，我們可選擇地加載需要的指令並在父指令鏈中進行查找。