Exceeding the layout view in a higher state from a lower state to ui-router leads to an empty ui-view

Question

I am trying to create a basic layout system using nested states in angular using ui-router.

I want any “subordinate state” to override the partial state of the 'layout' of the top-level state so that different site layouts can be used depending on the area of ​​the site.

Given the following system / server / views / index.html:

 <section data-ui-view="layout" ></section> 

and two layouts that need to be replaced with the above: system / state / views / layouts / standard.html:

  <div class="navbar navbar-inverse navbar-fixed-top" data-ui-view="header" data-role="navigation"></div> <section class="container-fluid"> <section data-ui-view ></section> </section> 

system / government / views / layouts / full width.html:

  <div class="navbar navbar-inverse navbar-fixed-top" data-ui-view="header" data-role="navigation"></div> <section class="container"> <section data-ui-view ></section> </section> 

sample content system /public/views/index.html

 <div>some sample content</div> 

and finally the router:

 function($stateProvider, $urlRouterProvider) { // For unmatched routes: $urlRouterProvider.otherwise('/'); // states for my app $stateProvider .state('root', { url: '/', abstract: true, views: { 'layout@': { templateUrl: 'system/views/layouts/standard.html' }, 'header@root': { templateUrl: 'system/views/partials/header.html' } } }) .state('root.home', { url: '', views: { 'header@root': { templateUrl: 'system/views/partials/header2.html' }, '': { templateUrl: 'system/views/index.html' } } }); } 

The above work. I can change the title inside and out in subordinate states, but if I add an override for the "layout":

 function($stateProvider, $urlRouterProvider) { // For unmatched routes: $urlRouterProvider.otherwise('/'); // states for my app $stateProvider .state('root', { url: '/', abstract: true, views: { 'layout@': { templateUrl: 'system/views/layouts/standard.html' }, 'header@root': { templateUrl: 'system/views/partials/header.html' } } }) .state('root.home', { url: '', views: { 'header@root': { templateUrl: 'system/views/partials/header2.html' }, '': { templateUrl: 'system/views/index.html' }, --->>> 'layout@': { templateUrl: 'system/views/layouts/full-width.html' } } }); } 

When I add 'layout@' , the value of date-ui-view="layout" loads correctly, but the sub ui-views for the title and unamed are not replaced.

Any ideas on what's going on here?

If this is not what should work, what are alternative approaches?

Answer 1

The fact is that overriding the template in the child state of 'root.home' looks like this:

 .state('root.home', { ... ->> 'layout@': { templateUrl: 'system/views/layouts/full-width.html' } 

In fact, any part of the parent "root" is completely removed. So now we have to use this for sister visions:

  '[e-mail]': { // see the 'root.home' after @ templateUrl: 'system/views/partials/header2.html' }, '@root.home': { // see the 'root.home' after @ templateUrl: 'system/views/index.html' }, 

See that we used root.home after @ . That is: We directly say:

• find ui-view="header" and unnamed ui-view="" inside this , current state of 'root.home' .

In the parent state "home" there is no goal, because we completely missed it.

The sample in the documentation in this case is really self-descriptive:

Browse Names - Relative and Absolute Names

(cited by himself describing the fragment)

 $stateProvider .state('contacts', { // This will get automatically plugged into the unnamed ui-view // of the parent state template. Since this is a top level state, // its parent state template is index.html. templateUrl: 'contacts.html' }) .state('contacts.detail', { views: { //////////////////////////////////// // Relative Targeting // // Targets parent state ui-view // //////////////////////////////////// // Relatively targets the 'detail' view in this state parent state, 'contacts'. // <div ui-view='detail'/> within contacts.html "detail" : { }, // Relatively targets the unnamed view in this state parent state, 'contacts'. // <div ui-view/> within contacts.html "" : { }, /////////////////////////////////////////////////////// // Absolute Targeting using '@' // // Targets any view within this state or an ancestor // /////////////////////////////////////////////////////// // Absolutely targets the 'info' view in this state, 'contacts.detail'. // <div ui-view='info'/> within contacts.detail.html "[e-mail]" : { } // Absolutely targets the 'detail' view in the 'contacts' state. // <div ui-view='detail'/> within contacts.html "detail@contacts" : { } // Absolutely targets the unnamed view in parent 'contacts' state. // <div ui-view/> within contacts.html "@contacts" : { } // absolutely targets the 'status' view in root unnamed state. // <div ui-view='status'/> within index.html "status@" : { } // absolutely targets the unnamed view in root unnamed state. // <div ui-view/> within index.html "@" : { } }); 

Also, pay attention to this important fact:

Inheritance of inheritance only in view hierarchy

Keep in mind that region properties only inherit the state chain if views of your states are nested. Inheriting the properties of a region has nothing to do with the embedding of your states and everything related to the embedding of your views (templates).

It is possible that you have nested states whose templates populate u-views in different non-nested places on your site. In this case, you cannot expect access to the variables of the parent state view region in the child state views.

those. - we cannot inherit from the parent state "root" anyhting, because inheritance has only view types ...