AngularJS指令之 require 参数 的用法
Posted lishalom
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="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参数所指定的控制器。
- ?^ 将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找。
以上是关于AngularJS指令之 require 参数 的用法的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS之基础-4 DI(控制器参数监听)指令(模板包含节点控制)事件绑定