In my ui-router setup, I have a 'parallel states' configuration that handles two different parts of the DOM (left and right) based on the URL and state. The right side always displays 'bar', while the left side alternates between baz and bat. There is an abstract parent state that determines which project to display using a project_id. Switching the parent state or project_id updates the content for baz, bat, and bar accordingly. The code provided below is functional.
However, the issue arises when transitioning from project.baz to project.bat, as the 'bar' view gets re-initialized (resulting in directives rerunning linking functions), causing some UI issues.
My question is: Is there a way to prevent the 'bar' view from reinitializing when switching from project.baz to project.bat? It should only reinitialize when the parent state (i.e., the project_id) changes.
Thank you.
$stateProvider
.state('project', {
abstract: true,
url: "/qux/:project_id",
views: {
"left": {
templateUrl: 'foo.html',
controller: 'FooController'
},
"right": {
templateUrl: 'bar.html',
controller: 'BarController'
}
}
})
.state('project.baz', {
url: "/baz",
views: {
"": {
templateUrl: 'baz.html',
controller: 'BazController'
},
"right": {
templateUrl: 'bar.html',
controller: 'BarController',
}
}
})
.state('project.bat', {
url: '/bat',
views: {
"": {
templateUrl: 'bat.html',
controller: 'BatController'
},
"right": {
templateUrl: 'bar.html',
controller: 'BarController'
}
}
})