directive之require

最新推荐文章于 2023-12-09 16:19:00 发布

youhebuke225

最新推荐文章于 2023-12-09 16:19:00 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJS 文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/youhebuke225/article/details/122213176

angularJS 专栏收录该内容

22 篇文章

订阅专栏

本文详细解析了Angular指令中的require属性在引用其他控制器和指令时的用法，包括不同前缀的含义、查找范围和可能出现的错误。重点讲解了ngModel在数据绑定中的应用，并提供了实例演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用

用来引用其他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>