Ui-router state templateurl not loading
My state is defined as:
.state('aid', {
title: "Activity ID",
url: "/aid",
templateUrl: 'views/modules/aid/aid-bau-reserved.htm'
})
.state('aid.bau', {
title: "Activity ID",
url: "/bau",
templateUrl: 'views/modules/aid/aid-bau-reserved.htm'
})
.state('aid.bau.reserved', {
title: "Activity ID: BAU Reserve ID",
url: "/reserved",
templateUrl: 'views/modules/aid/aid-bau-reserved.htm'
})
.state('aid.bau.prod', {
title: "Activity ID: BAU Production ID",
url: "/prod",
templateUrl: 'views/modules/aid/aid-bau-prod.htm'
})
When I try to load url:/aid/bau/prod
instead of template views/modules/aid/aid-bau-prod.htm
, it loads views/modules/aid/aid-bau-reserved.htm
. or any pattern defined in
.state('aid', {
title: "Activity ID",
url: "/aid",
templateUrl: 'views/modules/aid/aid-bau-reserved.htm'
})
Also I use:
var transitionTo = $state.transitionTo;
$state.transitionTo = function(to, toParams, options) {
var from = $state.$current,
fromParams = $state.params;
options.reload = true;
to = to.name ? to : $state.get(to);
if (options.notify && options.notify !== false) {
return $q.reject(new AuthorizationError('Rejecting $state.transitionTo', 'Transition Rejected'));
} else {
return checkAuthorize(to).then(function(auth) {
$rootScope.isAuthorized = auth;
return transitionTo(to, toParams, options);
})
}
}
to check credentials before moving on to $stateChangeStart
.
source to share
Thanks guys, I got the solution. @AlonEitan you are right about ui-view
. since i am using one ui-view
. The name needs to be updated based on the currentui-view
Html
<div ui-view="@{{current.parent.name}}" class="content"></div>
app.js
In the stateChangeSuccess
event, I updatecurrent.parent.name
$rootScope.$on("$stateChangeSuccess", function(event, to, from) {
$log.info("Route change success from", $rootScope.state.url, "to", to.url);
$rootScope.$state = $state;
$rootScope.current = angular.copy($state.$current);
});
source to share