directive值require

2021-12-29 15:34:22 阅读：179 来源： 互联网

标签：function directive require childName controller 指令 link scope

作用

用来引用其他controller
值可以为
1. 字符串:controller的名字
2. 数组:包含controller的名字的数组
引入之后我们能拿到的是绑定在this上面的属性和方法
一般与link相结合，通过link的第四个参数拿到引用的相关的数据

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <h2>{{childName}}</h2>
      <!-- 自定义组件 -->
      <div hello>
          <div hello-world></div>
      </div>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "父作用域";
      });
      app.directive("hello",function(){
          return {
            restrict:'A',
            controller:function(){
                this.sayName = function(){
                    console.log("Sunwukong");
                }
            }
          }
      })
      app.directive("helloWorld",function(){
          return {
            restrict:'A',
            template:`
            <div>
              <h2 ng-click="sayHisName()">{{childName}}</h2>
            </div>
            `,
            controller:function($scope){
              $scope.childName = "自定义组件"
            },
            require:"^hello",
            link:function(scope,ele,attr,controller){
                console.log(controller);
                scope.sayHisName = controller.sayName
            }
          }
      });
    </script>

  </body>
</html>

效果

注意这里的引用只能引用父组件的指令
我们注意到了require前面有一个^,他表示从自身以及父指令中寻找，找不到就报错，下面我们会一个一个介绍这些指令

前缀

无前缀

如果没有浅醉就会从自身所提供的控制器(指令)中查找，如果没有找到就会抛出一个错误，以以上代码为基础，如果把^去掉，那么，他就会报错
在这里插入图片描述

`^`

如上代码解释会在自身指令和父指令中寻找

`?`

表示在当前指令中寻找如果没有找到则将null传递给link的第四个参数
以以上代码为基础，我们修改如下

 controller:function($scope){
   $scope.childName = "自定义组件"
 },
 require:"?hellow",
 link:function(scope,ele,attr,controller){
     console.log(controller);
 }

因为没有hellow的指令所以他是找不到的，我们可以看打印
并没有报错，且第四个参数拿到的是null

`?^`

从当前的指令中寻找，找不到就去父级寻找，找不到link拿到的第四个参数为null

`^^`

直接从父级指令中寻找，如果没找到就报错

`ngModel`

博客链接

当我们require:ngModel他会查找查找定义在指令作当前用域中的ng-model
并且传入link的第四个参数为ngModelControll,可以观看上面的博客链接，他可以用于数据绑定，验证，css更新，格式化

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <h2>{{childName}}</h2>
      <!-- 自定义组件 -->
      <span>输入:</span><input ng-model="handleInput" type="text">
      <div hello-world ng-model="handleInput">Hello World</div>
    </div>

    <script>
      var app = angular.module("myApp", []);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
        $scope.childName = "父作用域";
      });
      app.directive("helloWorld",function(){
          return {
            restrict:'A',
            controller:function($scope){
              $scope.childName = "自定义组件"
            },
            require:"^ngModel",
            link:function(scope,ele,attr,ngModel){
                console.log(ngModel);
                ngModel.$render = function(){
                    console.log(ngModel.$viewValue)
                    // 对于收集到的值可以做一些其他的操作...
                }
            }
          }
      });
    </script>

  </body>
</html>

标签：function,directive,require,childName,controller,指令,link,scope
来源： https://blog.csdn.net/youhebuke225/article/details/122213176

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

directive值require

作用

代码

效果

前缀

无前缀

^

?

?^

^^

ngModel

`^`

`?`

`?^`

`^^`

`ngModel`