I'm encountering an issue with the ui.router plugin. I set up what I believed were 3 states to switch between:
$stateProvider
.state('rackOrShelf', {
url: '/information',
templateUrl: 'Scripts/html/rackOrShelfPartial.html'
}).state('door', {
url: '/information',
templateUrl: 'Scripts/html/doorPartial.html'
}).state('frame', {
url: '/information',
templateUrl: 'Scripts/html/framePartial.html'
});
In my HTML page, there is a header for displaying common elements at the top. Further down, within a div, I have the ui-view placeholder.
The HTML page contains an ng-controller that retrieves a JSON model, with one of the parameters being:
model.Transiton = 'frame';
This parameter is then used to trigger:
$state.transitionTo(model.Transiton);
The issue arises when the Transition is set to 'rackOrShelf' or 'door,' everything works as expected. However, setting it to 'frame' always displays the contents of the door templateUrl instead. Why is this happening?
This project is also a Single Page Application (SPA), and I am utilizing $routeProvider like this:
$routeProvider
.when("/main", {
templateUrl: "Scripts/html/main.html",
controller: "mainController"
}).when("/information", {
templateUrl: "Scripts/html/information.html",
controller: "informationController",
reloadOnSearch: false
})
.otherwise({ redirectTo: "/main" });
An update that seems to fix the issue:
$stateProvider
.state('empty', {
template: '<div></div>'
})
.state('rackOrShelf', {
templateUrl: 'Scripts/html/rackOrShelfPartial.html'
}).state('door', {
templateUrl: 'Scripts/html/doorPartial.html'
}).state('frame', {
templateUrl: 'Scripts/html/framePartial.html'
}).state('information', {
url: '/information',
params: {partial: 'empty'},
controller: function ($state) {
$state.go($state.params.partial);
}
});
Within my Angular controller, I have something similar to this:
$state.transitionTo('information', { partial:'door' || 'frame' || 'rackOrShelf' });