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参数所指定的控制器。
- ?^ 将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找。
时间： 2024-08-10 21:29:08