web-dev-qa-db-fra.com

AngularJS: Injecte le contrôleur dans un autre contrôleur du même module

Est-il possible d'injecter un contrôleur dans un autre contrôleur faisant partie du même module?

exemple:

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

Je continue à obtenir un fournisseur inconnu sur controllerOne. Je ne vois pas comment c'est possible puisqu'ils coexistent dans le même module. Toute aide serait très appréciée.

javascriptangularjsdependency-injectionangularjs-scopeangularjs-controller
16
Joseph Freeman

Vous devez utiliser la dépendance $controller en utilisant le fait que vous pouvez injecter un contrôleur à un autre

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

Mais préférez service/factory pour partager des données

25
Pankaj Parkar

Déplacez votre logique dans un "service" (soit une usine/service/fournisseur). Personnellement, je préfère les usines, j'aime juste contrôler mon propre objet au lieu d'utiliser this ou quoi que ce soit avec les autres options.

En utilisant un service, vous vous donnez la possibilité d’abstraire la logique d’entreprise de vos contrôleurs et de la rendre réutilisable -! 

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

Notice sharedService est injecté

.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() );
}]);

Note latérale: Les contrôleurs doivent être mis en majuscule pour montrer leur signification!

Le pouvoir des services :)

3
Mark Pieszak - DevHelp.Online

Si un controllerTwo doit appeler la même fonction que controllerOne, vous pouvez créer un service pour le gérer. Services angulaires - ils sont accessibles tout au long de votre programme grâce à l’injection de dépendance.

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;
}]);

J'espère que cela t'aides!

1
Matt Lemieux

Vous ne pouvez pas injecter de contrôleurs dans d'autres contrôleurs, seuls serviceProviers sont injectable. C'est la raison pour laquelle vous obtenez une erreur en tant que fournisseur inconnu dans le contrôleur un.

Utilisez plutôt les Services et insérez-les dans les contrôleurs, s'il existe des fonctionnalités à partager entre contrôleurs. Les services sont le meilleur moyen de partager des données entre contrôleurs.

Vous pouvez déclarer une variable ou une fonction ou dire un objet sur $ rootScope, il existe dans toute votre application.

Partage de données entre contrôleurs AngularJS

0
Ritesh