angularjs指令定义中的ｒｅｑｕｉｒｅ参数

最新推荐文章于 2021-04-19 21:36:35 发布

timelessmemoryli

最新推荐文章于 2021-04-19 21:36:35 发布

阅读量8.7k

点赞数 3

分类专栏： Angularjs 文章标签： angularjs require

本文链接：https://blog.csdn.net/u014788227/article/details/50416922

版权

Angularjs 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

require - 请求另外的controller，传入当前directive的link function中。require需要传入一个directive controller的名称。如果找不到这个名称对应的controller，那么将会抛出一个error。名称可以加入以下前缀：

? - 不要抛出异常。这使这个依赖变为一个可选项。

^ - 允许查找父元素的controller

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
       <script src="bootstrap.min.js"></script>
       <script type="text/javascript">
           var myapp = angular.module("myapp", []);
            myapp.controller("MyController", ['$scope', function($scope) {
                $scope.name = "mario";
                $scope.age = "13";
                $scope.send = function() {
                   console.log('.............');
                };
           }]);
           myapp.directive("parent", function() {
                return {
                   restrict: 'E',
                   scope:{},
                   controller: function() {
                       // this.data = ['1', '2', '3', '4', '5'];
                       data = ['1', '2', '3', '4', '5'];
                       this.click = function() {
                           data.pop();
                           console.log(data);
                       };
                   },
                   link: function(scope, elem, attrs) {
                       scope.name = '123';
                   },
                   template: '<span>{{name}}<div ng-transclude></div></span>',
                   replace: true,
                   transclude: true
                };
           });
           myapp.directive("son", function() {
                return {
                   restrict: 'E',
                   repalce: true,
                   require: '^?parent',
                   template: '<div ng-click="sonClick()">sonClick</div>',
                   link: function(scope, elem, atts, ctrl) {
                       scope.sonClick = ctrl.click;
                       // tmp = ctrl.data;
                       // console.log(tmp);
                       // ctrl.data.pop();
                   }
                };
           });
           myapp.directive("daughter", function() {
                return {
                   restrict: 'E',
                   repalce: true,
                   require: '^?parent',
                   template: '<div ng-click="daughterClick()">daughterClick</div>',
                   link: function(scope, elem, atts, ctrl) {
                       scope.daughterClick = ctrl.click;
                       // tmp = ctrl.data;
                       // console.log(tmp);
                   }
                };
           });
       </script>
       <style type="text/css">
       </style>
    </head>
    <body ng-app="myapp">
        <div class="container" ng-controller="MyController">
           <parent>
               <son></son>
               <daughter></daughter>
           </parent>
        </div>
    </body>

</html>

require之后可以在link中使用第四个参数ｃｔｒｌ调用到依赖的指令的controller中的方法变量．

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

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

所以当几个指令有共同的方法时可以抽取到一个指令中，然后ｒｅｑｕｉｒｅ一下．

上面的写法是

</parent>

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

补充

Require another directive and inject its controller as the fourth argument to the linking function. The require takes a string name (or array of strings) of the directive(s) to pass in. If an array is used, the injected argument will be an array in corresponding order. If no such directive can be found, or if the directive does not have a controller, then an error is raised. The name can be prefixed with:

(no prefix) Locate the required controller on the current element. Throw an error if not found
? Attempt to locate the required controller or pass null to the link fn if not found
^ Locate the required controller by searching the element’s parents. Throw an error if not found
?^ Attempt to locate the required controller by searching the element’s parents or pass null to the link fn if not found

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

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

timelessmemoryli

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
angularjs指令定义中的ｒｅｑｕｉｒｅ参数

require - 请求另外的controller，传入当前directive的link function中。require需要传入一个directive controller的名称。如果找不到这个名称对应的controller，那么将会抛出一个error。名称可以加入以下前缀：? - 不要抛出异常。这使这个依赖变为一个可选项。^ - 允许查找父元素的controller
复制链接

扫一扫