Typically i write SPA's and sharing data between controllers is simple with a service.
I am not using an SPA format (not using ng-view), and trying to share data between pages but on load of the second page (to get data) its empty.
PAGE1 (index.html):
<div ng-controller="CreateList">
<input type="text" ng-model="myValue">
<div ng-click="share(myValue)">Share</div>
</div>
PAGE2:
<div ng-controller="GeList">
<p>{{ sharedData }}</p>
</div>
JS:
app.controller('CreateList', function($scope, $location, $http, serviceShareData) {
$scope.share= function (selectedValue) {
if (selectedValue === undefined ) {
console.log ("its undefined");
}
else {
console.log (selectedValue);
serviceShareData.addData(selectedValue);
window.location.href = "PAGE2.html";
}
}
});
app.controller('GeList', function($scope, $location, $http, serviceShareData) {
$scope.sharedData = serviceShareData.getData();
console.log($scope.sharedData);
});
app.service('serviceShareData', function() {
var myData = [];
var addData = function(newObj) {
myData.push(newObj);
}
var getData = function(){
return myData;
}
return {
addData: addData,
getData: getData
};
});
Here's a plunkr: http://plnkr.co/edit/6VHJhirnHZxBpKOvqzI6?p=preview
There is a number of ways to share data between pages - local storage, session storage, indexedDB, cookies or you can even pass you data as a paramter like this:
window.location.href = 'page2.html?val=' + selectedValue;
Here is a quick example of how your service may be looking using sessionStorage:
app.service('serviceShareData', function($window) {
var KEY = 'App.SelectedValue';
var addData = function(newObj) {
var mydata = $window.sessionStorage.getItem(KEY);
if (mydata) {
mydata = JSON.parse(mydata);
} else {
mydata = [];
}
mydata.push(newObj);
$window.sessionStorage.setItem(KEY, JSON.stringify(mydata));
};
var getData = function(){
var mydata = $window.sessionStorage.getItem(KEY);
if (mydata) {
mydata = JSON.parse(mydata);
}
return myData || [];
};
return {
addData: addData,
getData: getData
};
});
Plunkr is here.
When you reload the page like this
window.location.href = "PAGE2.html";
the application is initialized again with all controllers, services, etc. Use web storage in your service to store data.
Don't use default js window object in your app. If you need to work with location, use $location service. If you need to get window properties, use $window object.
Use ng-view or try ui-router.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With