javascript - 有没有什么方法可以在组件中要求一个不是来自另一个指令或组件的 Controller ？

Question

我可以从一个指令或组件中要求一个不来自另一个指令或组件的 Controller 吗？

这是我尝试过的:

尝试 1

抛出注入(inject)器错误。

angular.module('test', [])
.controller('mainController', function(){
  this.someData = [{
    someKey : Math.random()*10
  }];
  this.someFunction = function(data){
    this.someData.push(data);
  }
})
.component('master', {
  require:{
    main:'mainController'
  },
  controller:function(){
    this.$onInit = function(){
      console.log(this);
    }
  }
});

尝试 2

创建 Controller 的新副本 - 不是我需要的。

angular.module('test', [])
.controller('mainController', function(){
  this.someData = [{
    someKey : Math.random()*10
  }];
  this.someFunction = function(data){
    this.someData.push(data);
  }
})
.component('master', {
  controller:function($controller){
    this.$onInit = function(){
      this.main = $controller('mainController');
      console.log(this);
    }
  }
});

要了解我在第二个示例中的意思，请参阅 This Plunkr .

我怀疑是否有办法，但老实说，我从未完全研究过 Angular 是如何实现它的功能的。很可能您必须创建一个新的组件/指令，并且您可以从那里包含它的 Controller ，但我充满希望!

Answer 1

ng-controller is a directive 。因此，就能力而言，可以要求最近的 Controller 具有

require: '^ngController'

它不一定是主 Controller ，只是一些 Controller 。

关于“最佳实践”，它不能，这闻起来很糟糕。上面的代码根本不需要主 Controller 。如果应该有一些全局 someData 和 someFunction - 让它们成为一个(或两个)服务。然后它可以被注入(inject)到任何组件 Controller ，而不管它们在 DOM 层次结构中的位置。