Within my app.js file, I am experiencing an issue with a parent state and a nested state. The parent state contains a button that is responsible for controlling what is displayed in the nested state. This is achieved by setting a url parameter, and the controller of the nested state determines the content to show. I am looking for a way to reload only the nested state when the user clicks the button.
Currently, I have both the parent state and the nested state that I wish to reload upon clicking the button.
While researching a solution, I came across a helpful thread on Stack Overflow. However, the button that triggers the reload action is located on the same page as the view that needs to be refreshed.
Below is a snippet of my app.js file:
.state('index.main', {
url: 'main/:userID',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('index.main.user', {
url: '/',
views: {
'user@index' : {
templateUrl: 'views/user.html',
controller: 'UserCtrl'
}
}
})
And here is the code snippet for the Parent Controller:
$scope.showUser = function(user) {
$state.go('index.main.user', { userID: user._id });
}