Using data from one controller in another

Question

I am making a website based on MEAN. Now I am trying to pass data from one controller to the next, but I don't seem to get it done. When an option is selected I want to take this value to the next page

This is the page with the selectbox:

<div class="plumber-by-city col-sm-12 home-text-col" ng-controller="DataCtrl">
<div class="title-1">Search by cityname</div>
   <select ng-model="selectedItem" ng-change="change()" ng-options="item as item.city for item in items"></select><span class="fa fa-caret-down"></span>
</div>

On change I want to take the selectedItem passed through to the next page with DataCtrl2

This is my DataCtrl:

app.controller('DataCtrl', function($scope,$http,getData,$location,$routeParams){

   getData.getCity($scope);

   $scope.change = function() {
      $location.path('/plumber-in/' + $scope.selectedItem.city);
   };
});

And the service that retrieves data from DB:

app.factory('getData', function($http){
  return {
     getCity: function($scope){
       return $http.get("/getdata").then(function(response){
         $scope.items = response.data;
         $scope.selectedItem = response.data[0];
       });
     }
   };
});

Now I don't know what to put in the DataCtrl2 for the second page and how to use the data from the DataCtrl in this page

Is it possible to create a working JSFiddle? You could use a service to persist (with a setter / getter) the active city between the controllers or use stateparams to transfer this data to the next state. — daan.desmedt, Jun 16 '17 at 08:29
@Larsmanson: make it simple, return promise from factory\service, and evaluate in controller. :) — anoop, Jun 16 '17 at 08:40
@Larsmanson : See the answers of this [question on SO](https://stackoverflow.com/questions/28830003/angular-factory-returning-a-promise) and in below answer `sachila` has done the same too. — anoop, Jun 16 '17 at 08:56

mechanicals · Accepted Answer · 2017-06-16T09:08:16.700

5

What you need is a Setter and Getter Method in your service. Something like this

app.controller('DataCtrl', 
    function($scope,$http,getData,$location,$routeParams){

   getData.getCity().then(function(response) {
      $scope.items = response.data;
      $scope.selectedItem = response.data[0];
   });

   $scope.change = function() {
      // sets the data to the service
      getData.setItem($scope.selectedItem);

      $location.path('/plumber-in/' + $scope.selectedItem.city);         
   };

});

app.factory('getData', function($http){
  return {
     getCity: function(){
       return $http.get("/getdata");
     },

     setItem: function(item) {
         this.item = item;
     },

     getItem: function() {
         return this.item;
     }
   };
});

app.controller('DataCtrl2', 
    function($scope, $http, getData,$location,$routeParams){
        // get the data from the service
        getData.getItem();
});

edited Jun 16 '17 at 09:08

answered Jun 16 '17 at 08:37

mechanicals

685
3
14

Somehow it does not go to the other page but stays on the same page – Larsmanson Jun 16 '17 at 08:51
@Larsmanson: are you talking about the data or the page view? Also there was a an typo. Updated. – mechanicals Jun 16 '17 at 08:53
The pageview does not change – Larsmanson Jun 16 '17 at 08:56
what error are you getting. Did you see the updated change. Also, just add the part of code which I added to your existing working code, – mechanicals Jun 16 '17 at 09:00
I've updated your code to not pass scope around. Have a look. – mechanicals Jun 16 '17 at 09:09
Thanx, I will check it out – Larsmanson Jun 16 '17 at 09:09

Sachila Ranawaka · Answer 2 · 2017-06-16T08:38:12.083

4

don't use $scope inside the factory. just return the request-promise to the controller and do your logic in there.

app.factory('getData', function($http){
  return {
     getCity: function(){
       return $http.get("/getdata");
     }
   };
});

modify the controller like this

app.controller('DataCtrl', function($scope,$http,getData,$location,$routeParams){

   getData.getCity().then(function(response) {
      $scope.items = response.data;
      $scope.selectedItem = response.data[0];
   });

   $scope.change = function() {
      $location.path('/plumber-in/' + $scope.selectedItem.city);
   };
});

edited Jun 16 '17 at 08:38

answered Jun 16 '17 at 08:31

Sachila Ranawaka

39,756
7
56
80

your answer is correct, don't know who down voted, further just remove `$scope` from `getData.getCity($scope).` and factory method also. :) – anoop Jun 16 '17 at 08:37
I've upvoted your answer - because the downvote was misplaced by someone... This is a possible solution... Although the answer above (using `service`) would be personally more preferred by myself. :) – daan.desmedt Jun 16 '17 at 08:40
@sachila: just saw you answer. He wast to pass the "selected item from options" across different controllers. How does your answer solves this ? – mechanicals Jun 16 '17 at 08:41
@mechanicals he is passing it through ` $location.path` as a parameter. so you don't need to create a separate factory function for that – Sachila Ranawaka Jun 16 '17 at 08:44
'When an option is selected I want to take this value to the next page'. I would think this question is more about how you can pass the data around controllers. Hence a generalised way wold be to have setter getter methods. – mechanicals Jun 16 '17 at 08:52
@sachila: I am not giving the information through as a parameter with $location.path. This only changes what comes after the url – Larsmanson Jun 16 '17 at 08:59
@Larsmanson, in that case, create getter and setter like `mechanicals` mentioned. but avoid using scope inside the factory – Sachila Ranawaka Jun 16 '17 at 09:02
@Larsmanson: pass in only the data you need as mentioned . rather than the whole scope. I'll update my code for that too. – mechanicals Jun 16 '17 at 09:04

Using data from one controller in another

2 Answers2