在指令中使用“require”来要求父控制器

Question

我尝试“要求”一个父控制器（不是指令），但 AngularJS 返回一个异常。代码是这样的：

JS

app.controller("myController", function ($scole) {
    ...
});

app.directive("myDirective", function ($q) {
    return {
        require: "^myController",
        template: "",
        link: function (scope, element, attrs, myCtrl) {
            ...
        }
    };
});

HTML

<div ng-controller="myController as myCtrl">
    ...
        <div my-directive>...</div>
    ...
</div>

错误

错误：[$compile:ctreq] 控制器“myController”，需要 指令“myDirective”，找不到！

为什么？
也许，require 属性必须引用 directive 的控制器？

谢谢

Answer 1

Require 是在另一个指令中使用其他指令控制器，请参考下面的示例

var App =  angular.module('myApp',[]);

//one directive

App.directive('oneDirective',function(){

  return {
      restrict: 'E',
      controller:function($scope){

       $scope.myName= function(){
            console.log('myname');
          }

         }
    }

});

   //two directive

  App.directive('twoDirective',function(){

  return {
      require:'oneDirective' //one directive used,
      link : function(scope,ele,attrs,oneCtrl){
         console.log(oneCtrl.myName())
     }

   }

  })

Answer 2

符号require: "^myController" 表示您的指令将尝试访问另一个名为myController 的指令，并在某些祖先标记上定义为my-controller 属性或<my-controller> 标记。在您的情况下，您没有这样的指令，因此例外。

这不是你想要做的很传统的事情，但如果你真的想在你的指令中要求外部控制器，你可以要求ngController：

app.directive("myDirective", function($q) {
    return {
        require: "^ngController",
        template: "",
        link: function(scope, element, attrs, myCtrl) {
            // ...
            console.log(myCtrl);
        }
    };
});

但是，这不是一个好主意。我无法想象你为什么会需要它。我建议查看scope 配置属性以及如何将可执行函数引用从外部控制器传递到指令中。

<div my-directive some-callback="test()"></div>

并在指令中定义范围：

scope: {
    someCallback: '&'
}

您将在控制器中的哪个位置拥有$scope.test = function() {};。那么你就不需要在指令中明确要求控制器了。