javascript - Angular Ui Router not loading view when accessing url [material-ui + tabs] -
i'm using angular + material-ui , want onboarding process different steps i'm using tabs directive , each different ui-view.
html:
<div ng-controller="tabsctrl" class="content" ng-show="$root.loadingcomplete"> <md-tabs md-selected="$root.selectedindex" md-border-bottom class="md-primary"> <md-tab id="tab1" md-on-select="goto('start')"> <md-tab-label>welcome</md-tab-label> <md-tab-template> <md-content> <div ui-view="vstart"></div> </md-content> </md-tab-template> </md-tab> <md-tab id="tab2" md-on-select="goto('personal')"> <md-tab-label>personal</md-tab-label> <md-tab-template> <md-content> <div ui-view="vpersonal"></div> </md-content> </md-tab-template> </md-tab> this routes config:
angular.module('onboarding').config(['$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) { $stateprovider .state('start', { url: '/:memberid', views: { vstart: { templateurl: 'views/start.html', controller: 'startctrl' } } }) .state('personal', { url: '/:memberid/personal', views: { vpersonal: { templateurl: 'views/personal.html', controller: 'personalctrl' } } }) ... the function goto(status):
$scope.goto = function(state) { $state.transitionto(state, $stateparams); }; the problem if open "home" @ url localhost:9000/#/12345 it's working fine, see start view , can switch personal view with
$rootscope.selectedindex = 1; $state.transitionto('personal', $stateparams); but if open url straight localhost:9000/#/12345/personal nothing happening, view not loaded , controller not loaded. have console.log('start controller') , same console.log('personal controller') check when loaded.
also browser history not working, example go start page locahost:9000/#/12345 , click on button go localhost:9000/#/12345/personal right if go browser history url localhost:9000/#/1245 (correct) view totally empty , no controller loaded @ all.
it seems routing off. ui-router appends substate's url parent state.
try removing heading /:memberid:
.state('personal', { url: '/personal', views: { vpersonal: { templateurl: 'views/personal.html', controller: 'personalctrl' } } })
Comments
Post a Comment