angularjs - Angular UI-router switch between multi views to single view -
i have app has 3 views (ui-view using angular ui-router): header, sidebar , content.
my index.html looks this: (i omitted actual classes clearness)
<body> <div ui-view="header" class="..."></div> <div class="page-container"> <div ui-view="sidebar" class="..."></div> <div class="page-content"> <div ui-view="content"></div> </div> </div> </div> </body> this pattern works pages have header , sidebar. have pages don't want display header , sidebar, example login page should fit on page. kind of pages need like:
ui-view should this:
<body> <div ui-view="content"></div> </body> so won't nested , under other views <div>'s , affected classes.
i have solutions in mind, none of them gave me enough ux. tried adding <ng hide> header , sidebar depending on state. worked there annoying flickering (that couldn't eliminate ng-cloak reason..)
to make things more clear, here example of 2 states , 1 "one pager" , other full page header , sidebar:
.state('login', { url: '/login', views: { 'content': { templateurl: './../templates/login.html', controller: 'loginctrl' } } }) .state('users', { url: '/users', views: { 'header': { templateurl: './../templates/header.html', controller: 'headerctrl' }, 'sidebar': { templateurl: './../templates/sidebar.html', controller: 'sidebarctrl' }, 'content': { templateurl: './../templates/users.html', controller: 'usersctrl' } } }) i think using nested views, not sure whether right approach.
maybe try using nested states, ie:
.state('app', { url: '/app', abstract: true, templateurl: './../templates/treeviewtemplate.html' }) .state('login', { url: '/login', templateurl: './../templates/login.html', controller: 'loginctrl' }) .state('app.users', { url: '/users', views: { 'header': { templateurl: './../templates/header.html', controller: 'headerctrl' }, 'sidebar': { templateurl: './../templates/sidebar.html', controller: 'sidebarctrl' }, 'content': { templateurl: './../templates/users.html', controller: 'usersctrl' } } }) in root abstract state define template 3 view-layout. login state instead take whole display.
Comments
Post a Comment