angularjs - Angular UI Router root named view template change from child view -
setup using angular v1.5.8, , ui-router v0.3.1 . root view has several named sections (ive removed number of them brevity). looks this
<section id="container"> <div id="main"> <div id="overlay"> <section id="overlay__content" ui-view="overlay"></section> </div> <div id="content"> <section id="content__content" ui-view="content"></section> </div> </div> </section> my state controller looks this
$stateprovider .state('app',{ url: '/', abstract: true, views: { 'overlay': { templateurl: partialsurl + 'main.overlay.html', // <-- content below controller: 'overlaycontroller', controlleras: 'vm' } } }) .state('app.foo', { url: 'foo', views: { 'content@': { templateurl: partialsurl + 'foo.main.html', controller: 'foocontroller', controlleras: 'vm' } } }) .state('app.foo.add', { url: '/add', views:{ 'content@overlay':{ // <-- not work templateurl: partialsurl + 'foo.add.html', controller: 'fooaddcontroller', controlleras: 'vm' } } }) my overlay view template (main.overlay.html) looks this
<a class="close">×</a> <div ui-view="content"></div> <!-- <-- load content here --> what im trying when app.foo.add state initiated load content content section of overlay root named view. can access root content view using content@ described here. however, there doesnt seem documentation traversing states's view deeply. ideally imagine want content@app(overview) (assuming () allowed select named view , go it, or perhaps content@app@overview. neither of work.
any suggestions solution or fundamental im missing appreciated
if i've interpreted problem correctly, think should work:
<!doctype html> <html> <head> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> <script> angular.module('app', ['ui.router']).config(function($stateprovider){ $stateprovider .state('app', { url: '/', abstract: true, views: { 'overlay': { templateurl: 'overlay.html' } } }) .state('app.foo', { url: 'foo', views: { 'content@': { templateurl: 'foo.content.html' } } }) .state('app.foo.add', { url: '/add', views: { 'content@app': { templateurl: 'foo.add.content.html' } } }); }).run(function($state){ $state.go('app.foo.add'); }); </script> </head> <body ng-app="app"> <div ui-view="overlay"> </div> <div ui-view="content"> </div> <script type="text/ng-template" id="overlay.html"> <h1>overlay</h1> <div ui-view="content"></div> </script> <script type="text/ng-template" id="foo.content.html"> <h1>foo content</h1> </script> <script type="text/ng-template" id="foo.add.content.html"> <h1>foo add content</h1> </script> </body> </html> explanation
i think misunderstanding have symbol after @ stands for. symbol before @ name of view want match, , symbol after @ reference state in template ui-view directive should exist in.
so in example, content@app saying ui-view="content" inside of views inside app state.
hopefully made sense.
Comments
Post a Comment