Exchanging data between different controllers in angularjs?

Question

I am trying to exchange data between two different controllers. I will access data in different controllers. I use /loading for showing a spinner. While navigating between different pages I load this spinner and after some time delay I navigate to another url which is intended. So I use this service to store the uri.

I have the following service in my angular js app.

myApp.service('myService', function() {
    var data = "";
    return {
        getUri: function () {
            return data;
        },
        setUri: function (uri) {
            data = uri;
        }
    };
});

The following are my routes:

twitter.config([ '$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider, $routeParams) {
        $routeProvider.when('/', {
            templateUrl : 'main.html',
            controller : 'mainController'
        }).when('/loading', {
            templateUrl : 'spinner.html',
            controller : 'spinnerController'
        }).when('/login', {
            templateUrl : 'login.html',
            controller : 'loginController'
        }).when('/signup', {
            templateUrl : 'signup.html',
            controller : 'signupController'
        });
        $locationProvider.html5Mode(true);
    } ]);

so I am trying to put data into the service by doing

myService.set('mydata');

and getting data by

myService.get();

But every time when I try to access the service in different controllers defined above I get empty string.

can you add the parts where you're actually using the service so we can see what's not working and how? — Matt Pileggi
– Matt Pileggi, Commented Mar 12, 2016 at 3:30

Pavan Teja · Accepted Answer · 2016-03-12 04:58:59Z

your service public methods are getUri and setUri but you are trying to use as myservice.get() and myservic.set().check the below snippet

var myApp = angular.module('myApp', []);

myApp.controller('controller1', function($scope, myService) {
  $scope.ControllerData = 'From Controller 1';
  myService.setUri('www.google.com');

});

myApp.controller('controller2', function($scope, myService) {
  $scope.ControllerData = 'From Controller 2';
  $scope.sharedData = myService.getUri();

});


myApp.service('myService', function() {
  var data = "";
  return {
    getUri: function() {
      return data;
    },
    setUri: function(uri) {
      data = uri;
    }
  };
});

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
  <meta charset=utf-8 />
  <title>ng-click</title>
</head>

<body>

  <div ng-controller="controller1">
    Controller1 Data: {{ControllerData}}
  </div>
  <div ng-controller="controller2">
    Controller 2 Data:{{ControllerData}}
    <br>Shared Data :{{sharedData}}
  </div>
</body>

</html>

ojus kulkarni · Accepted Answer · 2016-03-12 03:24:01Z

0

Try to set in this way :

setUri: function (uri) {
    this.data = uri;
}

answered Mar 12, 2016 at 3:24

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

1 Comment

Aspirant9 Over a year ago

Doesn't seem to work. When I route between pages I believe that the service is created always.

Collectives™ on Stack Overflow

Exchanging data between different controllers in angularjs?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related