Access $scope in different controllers in AngularJS

Question

I am doing my first steps with AngularJS and have a pretty basic question. I have an overview page with some products and want a detail view for each of these products. Here is the relevant code from my controllers:

shop.controller('OverviewController', ['$scope', '$location', 'Overview', function($scope, $location, Overview){
    console.log($scope.currentDetail); //always undefined
    $scope.overview = Overview.get();
    $scope.showDetails = function(product){
        $scope.currentDetail = product;
        console.log($scope.currentDetail); //output as expected
        $location.path("/productDetail");
    }
}
]);

shop.controller('DetailController', ['$scope', function($scope){
    console.log($scope.currentDetail);
}
]);

The relevant part from the overview page is like this:

<table class="table table-hover">
    <tr ng-repeat="product in overview.product" ng-click="showDetails(product);">

        <td>
            {{product.DESCRIPTION}}
        </td>

    </tr>
</table>

Problem is that the the output of console.log($scope.currentDetail); is always undefined. I think I am missing some basic concept of the $scope here. Any help is much appreciated.

Artyom Pranovich · Accepted Answer · 2014-06-06 10:06:57Z

3

You should not forget, that every controller has own $scope.

You can use shared service for case, where you want pass some values from one controller to another.

For example:

angular.module("yourAppName", []).factory("mySharedService", function(){
    var mySharedService = {};

    mySharedService.values = {};

    mySharedService.setValues = function(params){
        mySharedService.values = params;
    }

      return mySharedService; 
});

And after inject it into any controller.

function OverviewController($scope, mySharedService) {
    $scope.changeProductValue = function(value){
        mySharedService.setValues(value);  
    }
}

function DetailController($scope, mySharedService) {
   $scope.currentDetail = myService.values;
}

edited Jun 6, 2014 at 10:06

answered Jun 6, 2014 at 10:00

Artyom Pranovich

6,9728 gold badges43 silver badges60 bronze badges

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

3 Comments

Paul Over a year ago

Thanks, I will try that. As an alternative I want to reuse the OverviewController. When clicking (an running the showDetails function) the data is filled correctly, but when navigating to details the controller code is called again and the value of $scope.currentDetail is undefined again. Any idea about that?

Artyom Pranovich Over a year ago

@Paul, if you have saved data to sharedService, you can get necessary value from it. When you will pass on detail view page from overview page, you get data from shared service, like at my answer's example.

Paul Over a year ago

Thanks a lot, it is working. I am just looking for an alternative approach but I will put this in another question... Thanks again.

guru · Accepted Answer · 2014-06-06 10:06:37Z

$scope is specific only to the specific controller. So each controller will have its own scope variable. If you want to share data across controller use a service like below.

shop.controller('OverviewController', ['$scope', '$location', 'Overview', function($scope, $location, Overview, detailService){

    $scope.overview = Overview.get();
    $scope.showDetails = function(product){
        $scope.currentDetail = me.details = product;
        $location.path("/productDetail");
    }
}
]);

shop.controller('DetailController', ['$scope', function($scope, detailService){
    $scope.currentDetail = detailService.details;
    console.log($scope.currentDetail);
}
]);

shop.service('detailService', function(){
  var me = this;
  me.details = {};
  return this;
});

Collectives™ on Stack Overflow

Access $scope in different controllers in AngularJS

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related