Appel d’une méthode d’un contrôleur à partir d’un autre contrôleur utilisant ‘scope’ dans AngularJS

J’essaie d’appeler une méthode de second contrôleur dans le premier contrôleur en utilisant la variable de scope . Ceci est une méthode dans mon premier contrôleur:

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

Je suis capable de définir la valeur de rest_id mais je ne peux pas appeler getMainCategories pour une raison quelconque. La console affiche cette erreur:

TypeError: Object # n’a pas de méthode ‘getMainCategories’

Est-il possible d’appeler la méthode ci-dessus?

Modifier:

J’ai utilisé l’approche suivante pour charger deux applications en même temps;

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

Je pourrais certainement utiliser un service ici, mais je voulais savoir s’il y avait d’autres options pour faire la même chose!

La meilleure approche pour communiquer entre les deux contrôleurs consiste à utiliser des événements.

Documentation de scope

Dans cette commande, $on , $broadcast et $emit .

Dans les cas d’utilisation générale, l’utilisation d’ angular.element(catapp).scope() été conçue pour être utilisée en dehors des contrôleurs angulars, comme dans les événements jquery.

Idéalement, dans votre utilisation, vous écririez un événement dans le contrôleur 1 en tant que:

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

Et dans le second contrôleur, vous ne feriez que

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

Edit: Réalisé c’était la communication entre deux modules

Pouvez-vous essayer d’inclure le module firstApp comme une dépendance à la secondApp où vous déclarez le angular.module . De cette façon, vous pouvez communiquer avec l’autre application.

Voici une bonne démo dans Fiddle: comment utiliser les services partagés dans les directives et les autres contrôleurs via $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; }); 

De la même manière, nous pouvons utiliser le service partagé dans la directive. Nous pouvons implémenter une section de contrôleur dans directive et utiliser $scope.$on

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

Et ici, trois de nos contrôleurs où ControllerZero utilisé comme déclencheur pour appeler 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; }); } 

Le message ControllerOne et ControllerTwo écoute en utilisant $scope.$on gestionnaire.

Chaque contrôleur a sa propre scope, ce qui cause votre problème.

Avoir deux contrôleurs qui veulent accéder aux mêmes données est un signe classique que vous voulez un service . L’équipe angular recommande des contrôleurs minces qui ne font que coller entre les vues et les services. Et plus précisément, “les services devraient conserver un état partagé entre les contrôleurs”.

Heureusement, il y a une belle vidéo de 15 minutes qui décrit exactement cela (communication du contrôleur via les services): vidéo

Un des auteurs originaux de Angular, Misko Hevery, discute de cette recommandation (d’utiliser des services dans cette situation) dans son exposé intitulé Angular Best Practices (passez à 28:08 pour ce sujet, même si j’ai fortement recommandé de regarder l’intégralité du discours).

Vous pouvez utiliser des événements, mais ils sont conçus uniquement pour la communication entre deux parties qui souhaitent être découplées. Dans la vidéo ci-dessus, Misko note comment ils peuvent rendre votre application plus fragile. “La plupart du temps, injecter des services et communiquer directement est préférable et plus robuste” . (Consultez le lien ci-dessus à partir de 53:37 pour l’entendre parler de cela)