angularjs - Angular 需要父 Controller 而不明确指定名称

Question

此处显示的子指令中需要父 Controller 的常见场景:

Client 指令需要父Server Controller

  <div server>
    <div client></div>
  </div>



var app = angular.module("app", []);

app.directive("server", function() {
  return {
   controller: function() {
      this.log = function(message) {
        console.log(message);
      };
    }
  };
});

app.directive("client", function() {
  return {
    require: "^server",
    link: function($scope, $elem, $attrs, serverCtrl) {
      serverCtrl.log("Hello, this is the client!");
    }
  };
});

如果我有一个名为 MegaServer 的第三个指令指令怎么办？

app.directive("MegaServer", function() {
  return {
   controller: function() {
      this.log = function(message) {
        console.log(message);
      };
    }
  };
});

MegaServer 也可以是“Client”的父级。

  <div server>
    <div client></div>
  </div>
  <div mega-server>
    <div client></div>
  </div>

如果父 Controller 可以是 Server 或 MegaServer 类型，我该如何定义我的 Client 指令来要求父 Controller ？

Answer 1

让其他服务器在其 $scope 上发布其 this。然后让 client 指令使用可选的必需 serverCtrl 或 $scope.serverCtrl。

angular.module("app").directive("otherServer", function() {
  return {
   controller: function($scope) {
      $scope.serverCtrl = this;       
      this.log = function(message) {
        console.log("otherServer: ", message);
      };
    }
  };
});

angular.module("app").directive("client", function() {
  return {
    require: "^?server",
    link: function(scope, elem, attrs, serverCtrl) {
      var ctrl = serverCtrl || scope.serverCtrl;
      if (ctrl) {  
         ctrl.log("Hello, from a client");
         ctrl.log("My scope.$id is " + scope.$id);
      };
    }
  };
});

试一试 on JSFiddle .