AngularJS Controller en tant que service ou service en tant que contrôleur

Question

Lors de la création de l'application de tableau de bord, je suis arrivé à une situation où j'ai besoin d'un contrôleur et d'un service AngularJS en un.

A principal (1er) page que j'ai mainController (rien à voir avec la mise en page) et aussi layoutController qui est binded aux boutons avec des méthodes loadLayoutFromAPI() et saveLayoutToAPI().

Maintenant, au secondaire (2e), il y a secondController seulement et non layoutController. Je dois utiliser des méthodes de layoutController directement à partir de secondController et je préfère ne pas insérer la directive ng-controller à l'intérieur du HTML (au lieu de le mettre à secondController via le service d'injection de dépendance).

MainPage (1er):

<div ng-controller="mainController"> 
    <!-- some other code --> 

    <div ng-controller="layoutController as ctrl"> 
     <a href="#" ng-click="ctrl.loadLayoutFromAPI()">Load</a> 
     <a href="#" ng-click="ctrl.saveLayoutToAPI()">Save</a> 
    </div> 
</div> 

SecondaryPage (2):

<div ng-controller="secondController"> 
    <!-- some other code --> 
</div> 

j'ai essayé de chercher ce problème, mais pas de réponse du tout trouvé.

Question: Comment dois-je utiliser le même morceau de code (méthodes save() et load()) une fois en tant que contrôleur (ng-controller) et d'autres temps en tant que service (inclus) via dependency-injection?

Merci

JS Bin comme l'a demandé

Answer 1

Ne pas utiliser de méthodes à partir d'autres contrôleurs directement à partir d'autres contrôleurs ... C'est pourquoi les services sont là. Les contrôleurs sont seulement là pour s'engager avec la vue!

Si vous voulez communiquer entre des contrôleurs, ou des directives ou toute autre chose qui est ce que les services, les usines et les fournisseurs sont pour. Lors de la construction toute application, vous avez toujours abstraite sur une fonctionnalité commune à une sorte de service

Par exemple:

//Just an APP def 
var app = angular.module('dashApp', []); 

//LayoutController 
app 
    .controller('layoutController', ['CtrlService', function(ctrlService){ 
    this.saveLayoutToAPI = function(){ 
    ctrlService.save(); 
    } 
    this.loadLayoutFromAPI = function(){ 
    ctrlService.load(); 
    } 
}]); 

//Main Controller 
app 
    .controller('mainController', function(){ 
    //no work with layout at all 
}); 

//Secondary controller 

app 
    .controller('secondController', ['CtrlService', function(ctrlService){ 
    this.save = function(){ 
    ctrlService.save(); 
    } 
    this.load = function(){ 
    ctrlService.load(); 
    } 
}]); 

app 
    .service('CtrlService', function() { 

    var obj = { 
     save: function() { 
     console.log('Layout saved.'); 
     }, 
     load: function() { 
     console.log('Layout loaded.'); 
     } 
    } 

    this.save = obj.save; 
    this.load = obj.load; 
    }); 

Answer 2

Vous pouvez utiliser la diffusion $ pour y parvenir.

Ci-dessous le schéma expliquant le concept.

exemple de code de contrôleur-2

$rootScope.$broadcast('saveCalled'); 

exemple de code de contrôleur-1

$scope.$on('saveCalled',function(){ 
     saveLayoutToApi(); 
    })