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.
asked Mar 12, 2016 at 2:48
-
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 Pileggi2016年03月12日 03:30:09 +00:00Commented Mar 12, 2016 at 3:30
2 Answers 2
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>
answered Mar 12, 2016 at 4:58
Comments
Try to set in this way :
setUri: function (uri) {
this.data = uri;
}
answered Mar 12, 2016 at 3:24
1 Comment
Aspirant9
Doesn't seem to work. When I route between pages I believe that the service is created always.
lang-js