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? — Stewie
– Stewie, Commented Dec 23, 2013 at 9:24

pingul · Accepted Answer · 2013-12-23 08:56:52Z

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, 2013 at 8:56

pingul

3,4813 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Binson Eldhose Over a year ago

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

pingul Over a year ago

Do I understand correctly if you're not getting an updated value in Previewctrl when you change the value in Devicectrl?

Binson Eldhose Over a year ago

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

pingul Over a year ago

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.

Binson Eldhose Over a year ago

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

|

Chandermani · Accepted Answer · 2013-12-23 10:16:35Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related