Comment injecter un contrôleur dans un autre contrôleur dans AngularJS

Je suggère que la question que vous devriez poser est de savoir comment injecter des services dans les contrôleurs. Fat services avec des contrôleurs maigres est une bonne règle de base, aka il suffit d'utiliser des contrôleurs pour coller votre service/usine (avec la logique métier) dans vos vues.

Les contrôleurs sont collectés lors des modifications d'itinéraire, par exemple, si vous utilisez des contrôleurs pour contenir la logique métier qui rend une valeur, votre état va perdre sur deux pages si l'utilisateur de l'application clique sur le navigateur bouton.

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

app.factory('methodFactory', function () {
    return { myMethod: function () {
            console.log("methodFactory - myMethod");
    };
};

app.controller('TestCtrl1', ['$scope', 'methodFactory', function ($scope,methodFactory) {  //Comma was missing here.Now it is corrected.
    $scope.mymethod1 = methodFactory.myMethod();
}]);

app.controller('TestCtrl2', ['$scope', 'methodFactory', function ($scope, methodFactory) {
    $scope.mymethod2 = methodFactory.myMethod();
}]);

Voici un travail démonstration de l'usine injecté dans deux contrôleurs

Aussi, je suggère d'avoir une lecture de ce tutoriel sur les services / usines.

Il n'est pas nécessaire d'importer / injecter votre contrôleur dans JS. Vous pouvez simplement injecter votre contrôleur / contrôleur imbriqué via votre HTML.It ça a marché pour moi. Comme:

<div ng-controller="TestCtrl1">
    <div ng-controller="TestCtrl2">
      <!-- your code--> 
    </div> 
</div>

<div ng-controller="TestCtrl1">
    <div ng-controller="TestCtrl2">
      <!-- your code--> 
    </div> 
</div>

Cela fonctionne mieux dans mon cas, où TestCtrl2 a ses propres directives.

var testCtrl2 = $controller('TestCtrl2')

Cela me donne une erreur en disant scopeProvider erreur d'injection.

   var testCtrl1ViewModel = $scope.$new();
   $controller('TestCtrl1',{$scope : testCtrl1ViewModel });
   testCtrl1ViewModel.myMethod(); 

Cela ne fonctionne pas vraiment si vous avez des directives dans 'TestCtrl1', cette directive a en fait une portée différente de celle créée ici. Vous vous retrouvez avec deux instances de 'TestCtrl1'.

La meilleure solution:-

angular.module("myapp").controller("frstCtrl",function($scope){$scope.name="Atul Singh";}).controller("secondCtrl",function($scope){angular.extend(this, $controller('frstCtrl', {$scope:$scope}));console.log($scope);})

/ / Ici, vous avez reçu le premier appel du contrôleur sans l'exécuter

Vous pouvez également utiliser $rootScope pour appeler une fonction / méthode du 1er contrôleur à partir du deuxième contrôleur comme ceci,

.controller('ctrl1', function($rootScope, $scope) {
     $rootScope.methodOf2ndCtrl();
     //Your code here. 
})

.controller('ctrl2', function($rootScope, $scope) {
     $rootScope.methodOf2ndCtrl = function() {
     //Your code here. 
}
})

Utilisez typescript pour votre codage, car il est orienté objet, strictement typé et facile à maintenir le code ...

Pour plus d'informations sur typescipt cliquez ici

Voici un exemple simple que j'ai créé pour partager des données entre deux contrôleurs en utilisant Typescript...

module Demo {
//create only one module for single Applicaiton
angular.module('app', []);
//Create a searvie to share the data
export class CommonService {
    sharedData: any;
    constructor() {
        this.sharedData = "send this data to Controller";
    }
}
//add Service to module app
angular.module('app').service('CommonService', CommonService);

//Create One controller for one purpose
export class FirstController {
    dataInCtrl1: any;
    //Don't forget to inject service to access data from service
    static $inject = ['CommonService']
    constructor(private commonService: CommonService) { }
    public getDataFromService() {
        this.dataInCtrl1 = this.commonService.sharedData;
    }
}
//add controller to module app
angular.module('app').controller('FirstController', FirstController);
export class SecondController {
    dataInCtrl2: any;
    static $inject = ['CommonService']
    constructor(private commonService: CommonService) { }
    public getDataFromService() {
        this.dataInCtrl2 = this.commonService.sharedData;
    }
}
angular.module('app').controller('SecondController', SecondController);

}