Chame um método de um controlador de outro controlador usando ‘scope’ em AngularJS

Eu estou tentando chamar um método de segundo controlador no primeiro controlador usando a variável de scope . Este é um método no meu primeiro controlador:

 $scope.initRestId = function(){ var catapp = document.getElementById('SecondApp'); var catscope = angular.element(catapp).scope(); catscope.rest_id = $scope.user.username; catscope.getMainCategories(); }; 

Eu sou capaz de definir o valor de rest_id mas não posso chamar getMainCategories por algum motivo. O console mostra este erro:

TypeError: O object # não possui o método ‘getMainCategories’

Existe uma maneira de chamar o método acima?

Editar:

Eu usei a seguinte abordagem para carregar dois aplicativos ao mesmo tempo;

 angular.bootstrap(document.getElementById('firstAppID'), ['firstApp']); angular.bootstrap(document.getElementById('secondAppID'), ['secondApp']); 

Eu definitivamente poderia usar um serviço aqui, mas eu queria saber se há outras opções para fazer o mesmo!

A melhor abordagem para você se comunicar entre os dois controladores é usar events.

Documentação do escopo

Neste check out $on , $broadcast e $emit .

No caso de uso geral, o uso de angular.element(catapp).scope() foi projetado para uso fora dos controladores angulares, como nos events jquery.

Idealmente, no seu uso, você escreveria um evento no controlador 1 como:

 $scope.$on("myEvent", function (event, args) { $scope.rest_id = args.username; $scope.getMainCategories(); }); 

E no segundo controlador que você acabou de fazer

 $scope.initRestId = function(){ $scope.$broadcast("myEvent", {username: $scope.user.username }); }; 

Edit: Percebi que era comunicação entre dois módulos

Você pode tentar include o módulo firstApp como uma dependência para o secondApp onde você declara o angular.module . Dessa forma, você pode se comunicar com o outro aplicativo.

Aqui está uma boa demonstração no Fiddle como usar o serviço compartilhado na diretiva e outros controladores através do $scope.$on

HTML

 

JS

 var myModule = angular.module('myModule', []); myModule.factory('mySharedService', function($rootScope) { var sharedService = {}; sharedService.message = ''; sharedService.prepForBroadcast = function(msg) { this.message = msg; this.broadcastItem(); }; sharedService.broadcastItem = function() { $rootScope.$broadcast('handleBroadcast'); }; return sharedService; }); 

Da mesma forma, podemos usar o serviço compartilhado na diretiva. Podemos implementar a seção do controlador na diretiva e usar $scope.$on

 myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; }); 

E aqui três nossos controladores onde ControllerZero usou como gatilho para invocar prepForBroadcast

 function ControllerZero($scope, sharedService) { $scope.handleClick = function(msg) { sharedService.prepForBroadcast(msg); }; $scope.$on('handleBroadcast', function() { $scope.message = sharedService.message; }); } function ControllerOne($scope, sharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'ONE: ' + sharedService.message; }); } function ControllerTwo($scope, sharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'TWO: ' + sharedService.message; }); } 

A ControllerOne e a ControllerTwo ouvem a alteração da message usando $scope.$on handler.

Cada controlador tem seu (s) próprio (s) escopo (s), então isso está causando o seu problema.

Ter dois controladores que desejam acessar os mesmos dados é um sinal clássico de que você deseja um serviço . A equipe angular recomenda controladores finos que são apenas cola entre visualizações e serviços. E especificamente, “os serviços devem manter o estado compartilhado entre os controladores”.

Felizmente, há um bom vídeo de 15 minutos descrevendo exatamente isso (comunicação do controlador via serviços): video

Um dos autores originais do Angular, Misko Hevery, discute esta recomendação (de usar serviços nesta situação) em sua palestra intitulada Angular Best Practices (pule para 28:08 para este tópico, embora eu recomende muito bem assistir a palestra toda).

Você pode usar events, mas eles são projetados apenas para comunicação entre duas partes que desejam ser desacopladas. No vídeo acima, Misko observa como eles podem tornar seu aplicativo mais frágil. “A maior parte do tempo injetando serviços e fazendo comunicação direta é preferida e mais robusta” . (Confira o link acima a partir de 53:37 para ouvi-lo falar sobre isso)