AngularJS：从同一模块中注入一个控制器到另一个控制器

Question

是否可以将一个控制器注入到同一模块中的另一个控制器中？

例如：

var app = angular.module('myAppModule', [])
.controller('controllerOne', ['$scope', function($scope){
  $scope.helloWorld = function(){
    return 'Hello World';
  }
}])
.controller('controllerTwo', ['$scope', 'controllerOne', function($scope, controllerOne){
  console.log(controllerOne.helloWorld());
}])

我在controllerOne上不断收到未知提供者的错误提示。我不明白这是怎么可能的，因为它们都存在于同一个模块中。非常感谢您的任何帮助。

- Joseph Freeman

---

可能是重复的问题：一个控制器可以调用另一个控制器吗？ - Artem Petrosian

谢谢大家的建议！！！你们都是对的，我会把共享逻辑移到工厂中，这样更容易，也不会那么头疼哈哈。 - Joseph Freeman

Answer 1

你需要使用$controller依赖项，通过这种方式你可以将一个控制器注入到另一个控制器中。

.controller('controllerTwo', ['$scope', '$controller', function($scope, $controller){
  $controller('controllerOne', {$scope: $scope})
  //inside scope you the controllerOne scope will available
}]);

但更倾向于使用 service/factory 来共享数据

- Pankaj Parkar

---

这是一个很好的解决方案，但是为什么不使用服务/工厂来共享数据呢？如果我只想在controllerOne中使用一个函数，我不能使用$controller吗？ - gerl

“但更喜欢服务/工厂共享数据”。是的！是的！是的！ - Rap

你能举个例子说明注入后如何在另一个控制器中调用函数吗？ - Rigin Oommen

@RiginOommen，你说的“另一个控制器”是什么意思？ - Pankaj Parkar

$controller('GenericController', {$scope: $scope}); $scope.testing(); - Rigin Oommen

Answer 2

将你的逻辑移到一个“服务”中（可以是工厂/服务/提供者）。我个人更喜欢使用工厂，因为我喜欢控制自己的对象，而不是使用其他选项中的this之类的东西。

使用服务，你可以将业务逻辑从控制器中抽象出来，并使该逻辑可重用！

var app = angular.module('myAppModule', [])

// typically people use the word Service at the end of the name 
// even if it's a factory (it's all the same thing really...

.factory('sharedService', function () {

    var methods = {};

    methods.helloWorld = function () {
        return 'Hello World!';
    };

    // whatever methods/properties you have within this methods object
    // will be available to be called anywhere sharedService is injected.

    return methods;
})

注意，sharedService 被注入。

.controller('ControllerOne', ['$scope', 'sharedService', function($scope, sharedService) {
    $scope.helloWorld = sharedService.helloWorld();
}])

// Notice sharedService is injected here as well
.controller('ControllerTwo', ['$scope', 'sharedService', function($scope, sharedService){

    // Now we can access it here too!
    console.log( sharedService.helloWorld() );
}]);

顺便一提：为了显示其重要性，控制器应该以大写字母开头！

服务的力量 :)

- Mark Pieszak - Trilon.io

Answer 3

如果控制器Two需要调用与控制器One相同的函数，您可能希望创建一个服务来处理它。Angular Services - 通过依赖注入可以在整个程序中访问它们。

var app = angular.module('myAppModule', [])
.controller('controllerOne', ['$scope', 'Hello', function($scope, Hello){
   console.log(Hello.helloWorld() + ' controller one');
}])
.controller('controllerTwo', ['$scope', 'Hello', function($scope, Hello){
   console.log(Hello.helloWorld() + ' controller two');
}])
.factory('Hello', [function() {
   var data = {
      'helloWorld': function() {
          return 'Hello World';
       }
   }

   return data;
}]);

希望这有所帮助！

- Matthew Lemieux

Answer 4

你不能在一个控制器中注入另一个控制器，只有serviceProviers是可以被注入的。这就是你在控制器一中出现未知提供者错误的原因。

使用服务并将它们注入到控制器中，如果有一些功能需要在多个控制器之间共享。服务是在控制器之间共享数据的最佳方式。

你可以在$rootScope上声明一个变量、函数或对象，它存在于整个应用程序中。

在AngularJS控制器之间共享数据

- Ritt

---

在AngularJS中使用$rootScope被认为是一种不好的模式。 - Pankaj Parkar

是的，使用$rootScope是一种不好的做法，我提到它只是因为它是可供选择的选项之一。 - Ritt

你永远不应该使用$rootScope，这就是为什么我说你的$rootScope建议并不恰当。 - Pankaj Parkar