Question

我试图在自定义指令中使用require函数。但我根本无法使它工作。这就是我所拥有的：

JS：

var app = angular.module('main', []);
app.controller('MyController', ['$scope', function($scope){
        var random = Math.random()*10000;
    console.log('init random: ' + random);
    $scope.test = function(controllerName){
        console.log(controllerName + " " + random);
    }
  }]);

  app.directive('myDirective', function(){
    return{
      require: "^MyController",
      link: function(scope, els, attrs, req){
        scope.test('myDirective');
      }
    }
  });
    app.directive('mySecondDirective', function(){
    return{
      require: "^MyController",
      link: function(scope, els, attrs, req){
        scope.test('mySecondDirective');
      }
    }
  });

HTML：

<div ng-app="main" ng-controller="MyController">
    <my-directive></my-directive>
    <my-second-directive></my-second-directive>
  </div>

https://jsfiddle.net/hr8thyq5/3/

我得到的是这个错误信息：指令＆＃39; myDirective＆＃39;所需的控制器＆＃39; MyController＆＃39;无法找到！

我还需要做些什么才能让它发挥作用？

Answer 1

需要了解原因 -

如果要共享控制器的相同实例，则使用List<?>。

null确保存在另一个指令，然后将其控制器作为链接函数的参数。因此，如果您对一个元素有两个指令，那么您的指令可以要求存在另一个指令并获得对其控制器方法的访问权限。一个常见的用例是要求require。

require，添加了插入符号，除了当前元素之外还检查上述指令元素以尝试查找其他指令。这允许您创建复杂的组件，其中＆＃34;子组件＆＃34;可以通过其控制器与父组件通信，效果很好。示例可以包括标签，其中每个窗格可以与整个标签通信以处理切换;手风琴套装可以确保一次只开一个;等

在任何一种情况下，您必须同时使用这两个指令才能生效。 ngModel是组件之间进行通信的一种方式。

进一步了解转到此处：enter link description here

Answer 2

require中指定的控制器名为after their directives，而不是控制器名称。 require的目的是与相对指令的控制器实例（this）通信，它将等于链接函数中的req参数。

因此，它不能限于MyController。如果需要一些抽象的ng-controller控制器（由于这种情况的脆弱性而没有意义），那么它将是

require: "^ngController",

Angular：需要从模块注入控制器

2 个答案: