angularjs - 我可以在指令中使用 ng-controller 设置 Controller 吗？

Question

我有(某种)以下 html:

    <div ng-controller="MyController">
       <my-sub-directive></my-sub-directive>
    </div>

Controller 的外观并不重要:

app.controller("MyController", function($scope) {
   $scope.foo = "bar";
})

我的指令如下所示:

function mySubDirective() {
        return {
            restrict: "E",
            templateUrl:"aTemplate.html",
            require: "^MyController",
            link: function($scope, element) {

            }
        };
    }
app.directive("mySubDirective", mySubDirective);

在文档中，他们总是在 require 中指定另一个指令。 -property，但它说这意味着您需要 Controller 。所以我想尝试这个解决方案。但是我得到了错误

“无法找到指令‘mySubDirective’所需的 Controller ‘MyController’”。

如果由 ng-controller 设置，是否不可能从指令中要求 Controller ？

Answer 1

你只能这样做:

require: "^ngController"

所以，你不能比这更具体，即你不能要求 "MainCtrl"或 "MyController"按名称，但它会给你 Controller 实例:

.controller("SomeController", function(){
   this.doSomething = function(){
     //
   };
})

.directive("foo", function(){
  return {
    require: "?^ngController",
    link: function(scope, element, attrs, ctrl){
      if (ctrl && ctrl.doSomething){
        ctrl.doSomething();
      }
    }
  }
});

<div ng-controller="SomeController">
   <foo></foo>
</div>

不过，我不认为这是一个好方法，因为它使指令非常依赖于它的使用位置。您可以按照评论中的建议直接传递 Controller 实例 - 这使它更加明确:

<div ng-controller="SomeController as ctrl">
  <foo ctrl="ctrl"></foo>
</div>

但它仍然是一个过于通用的对象，很容易被指令的用户误用。

相反，公开一个定义良好的 API(通过属性)并传递对 Controller 中定义的函数/属性的引用:

<div ng-controller="SomeController as ctrl">
  <foo do="ctrl.doSomething()"></foo>
</div>