How to access the value of one controller from another controller in angularjs

Question

I have two controller in an angularApp with following codes

Controller:Devicectr

function Devicectr($scope, $http) {
    $scope.Devices = [{ Id: 1, Devicename: "MasterDeviceA" },
     { Id: 1, Devicename: "MasterDeviceB" },
     { Id: 1, Devicename: "MasterDeviceC" }];
    $scope.ActiveDevice = $scope.Devices[0] // 
};

Controller:PreviewCtr

function Devicectr($scope, $http) {
 $scope.ViewDevice=null;  // Here i want to read the  $scope.ActiveDevice from **Devicectr** Controller

};

I want read the $scope.ActiveDevice value of Devicectr controller from PreviewCtr controller. How i can do it

possible duplicate of [Can one controller call another in AngularJS?](http://stackoverflow.com/questions/9293423/can-one-controller-call-another-in-angularjs) — Stewie, Dec 23 '13 at 09:24

score 1 · Answer 1 · answered Dec 23 '13 at 08:56

1

Usually you use services when you want to share data between controllers.

Like:

yourModule.factory('yourService', function() {
    var sharedData = ...

    var getData = function() {
        return sharedData;
    }

    return {
        getData : getData
    }
}

and you then use this in both your controllers:

function Devicectr($scope, $http, yourService) {...}

function Previewctr($scope, $http, yourService) {...}

You could also nest the controllers to include the same scope, but I would say that is a worse idea.

answered Dec 23 '13 at 08:56

pingul

3,351
3
25
43

I attempted this approach but the problem i caught that,while page loading i got 0 value in previewCtr .even the device controller setup the value into the shared service . i found that the previCtr initializing before deviceCtr. i changed the order of the javascript reference but its not working. But i really confused that , i am using masterpages( ASP.NET) the DeviceController executing in master page and PreviewController in Child page will it cause any issues in the order of execution of javscript – Binson Eldhose Dec 23 '13 at 09:26
Do I understand correctly if you're not getting an updated value in Previewctrl when you change the value in Devicectrl? – pingul Dec 23 '13 at 09:30
Pingul, i can read the value by any control events like clicks and changes. My cause is different the execution of my page is ( proposed) given below .1) Devices controller load devices and set a shared data in sharedservice. then the previewController read this data from sharedservice whenever required – Binson Eldhose Dec 23 '13 at 09:34
Yes that should work, although you will have to notify Previewctr every time a change has been made to refetch the data from the service. – pingul Dec 23 '13 at 09:40
Yes! i changed it its work but the problem is ,The first time when page loaded, it will not work there after i can read the value which changed by the Devicectr – Binson Eldhose Dec 23 '13 at 09:42
This like i setup the Shared service in my app, will it cause any problem when injecting ( Check the new keyword, will it inject different instance) TeslaApp.factory("SharedDataService", function() { return new SharedDataService(); }); – Binson Eldhose Dec 23 '13 at 09:45
And my shared service like :: function SharedDataService() { var activeDeviceId = 0; this. getDeviceId = function() { return activeDeviceId; }; this. setDeviceId = function(deviceId) { activeDeviceId = deviceId; }; } – Binson Eldhose Dec 23 '13 at 09:46
I'm having a hard time understanding your problem – please format your code if I'm supposed to read it. Although if you combine my answer with Chandermani's below, I think you should have everything you need. – pingul Dec 23 '13 at 11:29

score 0 · Answer 2 · answered Dec 23 '13 at 10:16

Create a DeviceService which keeps track of the currently selected device. It should expose setActive(device) and getActive() method.

In your PreviewCtr inject the service to determine the active device. You need to watch for the Device assignment or change

If you assign the service to the scope like

$scope.deviceService=deviceService; you can do something like

$scope.$watch(function(){ return $scope.deviceService.getActive();},function(newValue,oldValue) {
  //This gets called when the device change
});

You and also use scope $broadcast method (using $rootScope) in the service to raise an event when the Device changes in setDevice(device) function. You can catch that event any where using $scope.$on handler. See documentation here.

How to access the value of one controller from another controller in angularjs

2 Answers2