javascript - Angular, UI Router, Nested Navigation, and Tabs Issues -
i'm trying build navigation system using angular, ui-router, , tabs. pretty have working, having strange behavior.
there's top level navigation in form of navbar @ top. routing defaults 'dashboard'. @ same 'level' of 'dashboard' 'recordings'. inside 'recordings', there's secondary nav in form of tabs. 1 tab search form, other results set. when submitting form, should switch results tab. clicking on tabs should take corresponding view. , clicking on top level navigation (dashboard,logs) should take correct state.
issues include:
- active state of tabs applies after clicking on tab twice. applies active
- inconsistent behavior top level navigation. requires 2 clicks well
here's stripped down plunker of setup. plunker
routing
$urlrouterprovider.otherwise('/dashboard'); $stateprovider .state('dashboard', { url: '/dashboard', views: { 'main': { controller: 'dashboardctrl', templateurl: 'dashboard.tpl.html' } } }) .state('recordings', { url: '/recordings', views: { 'main': { controller: 'recordingsctrl', templateurl: 'recordings.tpl.html' } } }) .state('recordings.search', { abstract: true, url: '/search', views: { 'recordings': { controller: 'searchctrl', templateurl: 'search.tpl.html' }, '': { templateurl: 'searchcontent.tpl.html' } } }) .state('recordings.search.form', { url: '/form', controller: 'searchctrl', templateurl: 'form.tpl.html' }) .state('recordings.search.results', { url: '/results', controller: 'resultsctrl', templateurl: 'results.tpl.html' });
tab code
$scope.tabs = [ { heading: 'search', state: 'recordings.search.form', active: false }, { heading: 'results', state: 'recordings.search.results', active: false } ]; $scope.go = function(route){ $state.go(route); }; $scope.active = function(route){ return $state.is(route); }; $scope.$on("$statechangesuccess", function() { console.log('yay'); $scope.tabs.foreach(function(tab) { tab.active = $scope.active(tab.route); }); });
tab view
<tabset> <tab ng-repeat="t in tabs" heading="{{t.heading}}" ng-click="$state.go(t.state)" active="t.active"> </tab> </tabset>
Comments
Post a Comment