I have Two pages in my website. One is EventList and other is EventDetail. When I click on any of the Event in EventList Page then it redirect me to EventDetail Page. I took EventId of Event to fetch the details and populate the corresponding data in EventDetail Page. This happens fine when I do it for first time. When I refresh the page then EventId of Event wiped away. I am using ui-router for passing the EventId as State Parameter to EventDetail Page.
StateRouter.JS
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home.eventlist', {
url: '/eventlist',
views: {
'homedetailview':
{
templateUrl: 'EventsPages/ListEvent.html',
controller: 'ctrlEventList'
}
}
})
.state('home.eventlist.eventdetail', {
url: '/eventdetail',
params: { paramOne: "defaultValueOne" },
views: {
'homedetailview@home':
{
templateUrl: 'EventsPages/AddEvent.html',
controller: 'ctrlEventContent',
}
}
})
})
EventList.HTML
<form class="form-main">
<div class="div-main">
<div class="gridBigStyle" ui-grid="gridEventList" ui-grid-pagination>
</div>
</div>
</form>
EventListController.JS
myApp.controller("ctrlEventList", ['$scope', function ($scope) {
$scope.gridEventList = {
data: 'eventlistdata',
columnDefs: [
{ field: 'SiteEventNumber', displayName: 'Event Number' },
{ field: 'EventName', displayName: 'Event Name' },
{ name: 'actions', displayName: 'Actions', cellTemplate: $scope.actions}
]
}
$scope.actions =
'<a ui-sref=".eventdetail({paramOne:row.entity.EventId})"></a>';
}])
EventDetailController.JS
myApp.controller("ctrlEventContent", ['$scope', '$stateParams', function ($scope, $stateParams) {
alert($stateParams.paramOne);
}])
When I refresh the page then it is showing alert as "defaultValueOne" which is mentioned as default value of StateParams.
I searched net and see that local storage can solve this problem but I dont know how to implement here and what is the disadvantage over other options. It would be great if working example is provided on this.
