There are two pages in my project - the first one is called ItemMenuPage and the second one is called CartPage. The functionality I am trying to achieve is that when a user clicks on any item name on the ItemMenuPage, it should navigate to the CartPage, with the selected item name displayed.
MenuController
.controller('FoodCtrl', function($scope, $state, mySharedService) {
$scope.addProductItem = function(product) {
var itemName = product.itemName;
mySharedService.setData(product);
$state.go('app.produce');
}
});
CartController
.controller('ProduceSaveController', ['$scope','mySharedService',
function(scope, mySharedService){
scope.$on('handleBroadcast', function() {
scope.itemName = mySharedService.itemName;
})
service.js
.factory('mySharedService', function($rootScope) {
var sharedService={};
sharedService.itemName='';
sharedService.setData = function(product) {
this.itemName = product;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
$rootScope.$broadcast('handleBroadcast');
};
return sharedService;
})