Call the controller method from another controller using 'scope' in AngularJS

Question

I am trying to call the second controller method in the first controller using the scope variable. This is my first controller:

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

I can set the rest_id value, but for some reason I cannot call getMainCategories . The console shows this error:

TypeError: Object # does not have a method 'getMainCategories'

Is there a way to call the above method?

Edit:

I used the following approach to download two applications at the same time:

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

I could definitely use the service here, but I wanted to know if there are other options for this!

Answer 1

The best approach for communicating between two controllers is to use events.

Area Documentation

In this case, check $on , $broadcast and $emit .

In general, using angular.element(catapp).scope() intended to be used outside of angular controllers, such as in jquery events.

Ideally, in your use, you should write an event in controller 1 as:

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

And in the second controller you just do

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

Edit: implemented that it was a connection between two modules

Can you try to include the firstApp module as a dependency on secondApp , where you declare angular.module . This way you can chat with another application.

Answer 2

Here is a good demonstration in Fiddle how to use a shared service in a directive and other controllers via $scope.$on

HTML

 <div ng-controller="ControllerZero"> <input ng-model="message" > <button ng-click="handleClick(message);">BROADCAST</button> </div> <div ng-controller="ControllerOne"> <input ng-model="message" > </div> <div ng-controller="ControllerTwo"> <input ng-model="message" > </div> <my-component ng-model="message"></my-component> 

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

In the same way, we can use the shared service in the directive. We can implement the controller section in the directive and use $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: '<input>' }; }); 

And here are our three controllers where ControllerZero used as a trigger to call 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; }); } 

Cancel ControllerOne and ControllerTwo listening for message using the $scope.$on handler.

Answer 3

Each controller has its own areas (areas) to cause your problem.

Having two controllers that want to access the same data is a classic sign of what you want to use . The angular team recommends thin controllers that simply stick together between views and services. And in particular, "services must maintain a common state between controllers."

Fortunately, there is a nice 15-minute video describing exactly this (communication with the controller via services): video

One of Angular's original authors, Misko Hevery, discusses this recommendation (about using services in this situation) in a conversation called Angular Best Practices (go to 28:08 for this topic, although I highly recommend watching the whole conversation).

You can use events, but they are only for communication between two parties who want to be unleashed. In the aforementioned video, Misko notes how to make the application more fragile. "Most of the time, injection services and direct communications are preferable and reliable . " (Check out the link above starting at 53:37 to hear him talking about it)