angular ui - Hide Parent's sbling ui-view quadrant when in a child state -

angular ui - Hide Parent's sbling ui-view quadrant when in a child state -

when go kid state, want hide ui-view component of quadrant ui-view in root state. how can accomplish this.

##index.html <div ui-view="a"> </div> <div ui-view="b"> </div> <div ui-view="c"> </div> ##b.html <div ui-view> </div> ##config $stateprovider.state('start', { 'views': { 'a': { templateurl: ... }, 'b': { templateurl: 'b.html' }, 'c': { templateurl: ... } }, controller: 'indexcontroller }).state('start.all', { templateurl: 'd.html', controller: 'allcontroller' });

so when reach start.all, ui-view tagged c vanishes. how can accomplish this.

there an example demonstrating approach discussed below. native way of ui-router, i'd say, manage views current (active) state. can :

view names - relative vs. absolute names

... behind scenes, every view gets assigned absolute name follows scheme of viewname@statename, viewname name used in view directive , state name state's absolute name, e.g. contact.item

in our case, total name of view 'c' c@, i.e. c view name, @ delimiter , empty string representing root (a bit weird in fact logical).

having can alter start.all definition this:

.state('start.all', { url : '/all', 'views': { '': { template: '<span>this start all</span>', }, 'c@': { template: '<span></span>', }, }, })

and alter content of c view in root. , should native way ui-router. not remove it, can replace empty stuff.

also, illustration above, placed controller called bcontroller contra illustration indexcontroller:

.state('start', { url : '/start', 'views': { 'a': { template: ... }, 'b': { template: ... // here new controller bcontroller controller: 'bcontroller', }, 'c': { template: ... } }, // orginal contoller controller: 'indexcontroller', })

and defined them way:

.controller('indexcontroller', function($scope, $state, $stateparams) { console.log('indexconroller invoked'); }) .controller('bcontroller', function($scope, $state, $stateparams) { console.log('bconroller invoked'); })

why? show you, indexcontroller never invoked. contollers belongs templates/views not state...

check here

angular-ui angular-ui-bootstrap angular-ui-router