I'm struggling to grasp the concept of routing with angular-ui-router and states.
My application is built on ionic (v1), angular, and esri jsapi. I am utilizing the ionic side menu and angular-ui-router. Upon loading my site, the map view is displayed. When navigating to a station using the side menu, then viewing the station details, and clicking the map button to zoom in on the location, I use $state.go() to return to the map view, and notice that the view/controller is re-initialized. This can be observed by checking the console and seeing "CREATE MAP" being displayed again after the initial loading of the map view.
The state configurations are as follows:
.state('app.map', {
url: '/map',
cache: true,
reload: false,
params: {
attributes: null
},
views: {
'menuContent': {
templateUrl: 'templates/map.html',
controller: 'MapController'
}
}
})
.state('app.detail', {
url: '/detail',
cache: false,
params: {
properties: null
},
views: {
'menuContent': {
templateUrl: 'templates/detail.html',
controller: 'DetailController'
}
}
})
I am looking for a way to prevent the map view/controller from being re-instantiated when transitioning from the detail view back to the map view. I expect the button click from the detail page to take me back to the original map view state, but it seems to be attempting to create another instance of the map view. However, if I click on the side menu button for the map, it does not re-initialize and I see the original map view.
View my site here:
EV Charge Stations