javascript - Angular UI router nested views - Stack Overflow

admin管理员组

文章数量:1400157

I have a structure like this:

<div ui-view="main">
  <!-- content populated here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- content populated here by AngularJS ui-router -->
  </aside>
</div>

I want to be able to define the templates in the main state like below instead of having to manage it in the child state.

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    'sidebar': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

I'd like the ui-view named sidebar to not be a child state of main and be populated by the main state's views object instead of by a child state's templateUrl field. How can I do that?

I have a structure like this:

<div ui-view="main">
  <!-- content populated here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- content populated here by AngularJS ui-router -->
  </aside>
</div>

I want to be able to define the templates in the main state like below instead of having to manage it in the child state.

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    'sidebar': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

I'd like the ui-view named sidebar to not be a child state of main and be populated by the main state's views object instead of by a child state's templateUrl field. How can I do that?

• javascript
• angularjs
• angular-ui
• angular-ui-router

Share Improve this question Follow edited Aug 30, 2014 at 22:35 Ilan Biala asked Aug 30, 2014 at 22:29 Ilan BialaIlan Biala 3,41955 gold badges3737 silver badges4545 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

We can use more views inside one state, see:

• Multiple Named Views

The definition would just need to use the absolute naming:

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    // instead of
    // 'sidebar': {
    // we need
    'sidebar@state1': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

As explained in a detail here:

• View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

So, as snippet above shows, if the content of the

 /modules/blog/partials/index.html

would be:

<div>
  <!-- content populated here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- content populated here by AngularJS ui-router -->
  </aside>
</div>

and the index.html will contain placeholder:

<div ui-view="main" ></div>

Then the

• 'main' - will be searched in parent root (index.html)
• 'sidebar@state1' will be evaluated as viewName/target in 'state1' (itself)

An example with similar idea and some layout.html behind...

本文标签： javascriptAngular UI router nested viewsStack Overflow