在Directive中使用"require"来要求父控制器

rio*_*fly 10 angularjs

我尝试"需要"父控制器(非指令),但AngularJS返回一个异常.代码是这样的:

JS

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

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

HTML

<div ng-controller="myController as myCtrl">
    ...
        <div my-directive>...</div>
    ...
</div>
Run Code Online (Sandbox Code Playgroud)

错误

错误:[$ compile:ctreq]无法找到指令'myDirective'所需的控制器'myController'!

为什么?
也许,require属性必须引用指令的控制器?

谢谢

Shu*_*gar 9

要求在另一个指令中使用其他指令控制器,请参考下面的示例

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())
     }

   }

  })
Run Code Online (Sandbox Code Playgroud)


dfs*_*fsq 5

符号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);
        }
    };
});
Run Code Online (Sandbox Code Playgroud)

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

<div my-directive some-callback="test()"></div>
Run Code Online (Sandbox Code Playgroud)

并在指令中定义范围:

scope: {
    someCallback: '&'
}
Run Code Online (Sandbox Code Playgroud)

在控制器中你会有什么$scope.test = function() {};.然后你不需要在指令中明确要求控制器.