首页 > 代码库 > AngularJS指令之 require 参数 的用法

AngularJS指令之 require 参数 的用法

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="http://www.mamicode.com/bootstrap.min.css">
 6         <script src="http://www.mamicode.com/jquery.min.js"></script>
 7         <script src="http://www.mamicode.com/angular.min.js"></script>
 8         <script src="http://www.mamicode.com/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 = http://www.mamicode.com/[‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘];
24                         data = http://www.mamicode.com/[‘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中使用第四个参数ctrl调用到依赖的指令的controller中的方法变量.

可以看到son, daughter都可以调用到parent中的click函数,并且操作同一个data.可以发现click前面用this,修饰.

data如果也使用this.修饰,那么结果是一样的,可以被其依赖的指令使用ctrl.data访问到.

所以当几个指令有共同的方法时可以抽取到一个指令中,然后require一下.

上面的写法是

  <parent name="123">
      <son></son>
      <daughter></daughter>
 </parent>

按照上面的说法是使用父元素的controller,所以^不可少,写法也必须那么写才可以调到click函数.

补充

引入其他指令并注入到控制器中,并作为当前指令的链接函数的第四个参数。require使用字符串或数组元素来传入指令。如果是数组,注入的参数是一个相应顺序的数组。如果这样的指令没有被找到,或者该指令没有控制器, 就会报错。 require参数可以加一些前缀:

  • (没有前缀)如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器就抛出一个错误。
  • ? 如果在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数。
  • ^ 如果添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器。
  • ?^ 将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找。

AngularJS指令之 require 参数 的用法