How to fetch scope value from one controller to another controller in angular JS

Question

How to fetch the scope value from one controller to another controller html

<button class="btn btn-info" ng-click="setLanguage('en')">English</button>
<button class="btn btn-info" ng-click="setLanguage('de')">Danish</button>

Javascript

  .controller('demoCtrl', function($scope) {
    $scope.setLanguage = function(language) {
        $scope.language = language;    
       }
    });

I tried To use services but its no use.... Can you try and give me the link — Nithesh S D, Jan 28 '16 at 05:49
http://stackoverflow.com/questions/12008908/angularjs-how-can-i-pass-variables-between-controllers refer this link — AKASH, Jan 28 '16 at 06:03

varun · Accepted Answer · 2016-01-28T06:39:08.233

1

You can use a service to get the value set by one controller into another controller.

.service('someService', function () {
  this.language = null;
})

Controller

.controller('demoCtrl', function($scope, $rootScope, someService) {
    $scope.setLanguage = function(language) {
        $scope.language = language;
        someService.language = language;
        $rootScope.$broadcast('languageChanged');
    } 
});

In the other controller

.controller('someCtrl', function($scope, $rootScope, someService) {
    $rootScope.$on('languageChanged', function () {
        $scope.language = someService.language;
    }
});

edited Jan 28 '16 at 06:39

answered Jan 28 '16 at 05:51

varun

652
4
5

Are you sure that the language is getting set in the demoCtrl. Could you console.log(someService.language) in the $scope.setLanguage method after setting someService.language? – varun Jan 28 '16 at 06:20
Ya i tried in demo ctrl in that its getting value name... but while giving console to servive and in another controller its getting null value – Nithesh S D Jan 28 '16 at 06:23
Could you create a fiddle for this? – varun Jan 28 '16 at 06:25
Actually we used seperate files for header, sidebar and so on. two buttons are on navbar called "En" and "De". if we click en then lang is en and if we click de then lang should be de. so for nav bar we used notification.js and templates we used marker.js and different controller – Nithesh S D Jan 28 '16 at 06:34
I tried but its getting error TypeError: $rootScope.broadcast is not a function – Nithesh S D Jan 28 '16 at 06:44
Thanks and its working fine!. Last thing , If we click de button then language changed to de but if we refresh the page the language sets to en. This is a bug how to fix this.. If we click de then reload page it should de only – Nithesh S D Jan 28 '16 at 07:28
You can use cookies to persist the language selected but user – varun Jan 28 '16 at 08:03
Are you using angular translate module for translations – varun Jan 28 '16 at 08:05
Nope i didnt used any translation modules – Nithesh S D Jan 28 '16 at 08:07
Your post saved my time.Thank you so much for sharing – arul pushpam Oct 09 '20 at 23:23

score 0 · Answer 2 · answered Jan 28 '16 at 05:58

You can share data between controllers with the help of either a service or you can use $emit() and $broadcast() functions.

There is a listener function in AngularJS $on() which will always be listening to the broadcast and emit events.

The syntax for the above function :

$scope.$emit(‘name1’,{}); //here you can send your data
$scope.$broadcast(‘name2’,{});
$scope.$on(‘name2’,function(event,args){
});

When using a service you can simply inject the service into your two controllers and share the data.

.service('someService', function () {
   var self=this;
   self.language = '';
});

.controller('firstCtrl', function($scope, someService) {
    $scope.setLanguage = function(language) {
    $scope.language = language;
    someService.language = language;
    } 
});

.controller('secondCtrl', function($scope, someService) {
    $scope.language = someService.language;
 });

I tried but while console the service value its not getting any value.... Its giving blank value — Nithesh S D, Jan 28 '16 at 06:17

score 0 · Answer 3 · edited Jun 06 '16 at 09:02

0

If we want to call example method of:
"test1 DIV controller"
from:
"test2 DIV controller"
then we can write above method.

angular.Element(document.getelementByID('testDIV')).scope().example method name();

in test2DIVcontroller.

For Example :

<DIV ID="test1DIV" ng-controller="test1DIV controller"></DIV>
<DIV ID="test2DIV" ng-controller="test2DIV controller"></DIV>

edited Jun 06 '16 at 09:02

Cerbrus

70,800
18
132
147

answered Jun 06 '16 at 09:00

Moltech solutions

31
1
2

How to fetch scope value from one controller to another controller in angular JS

3 Answers3