0

I'm using ui-router for the following purpose:

1. I want load a layout template(such as left-right layout).
2. I want make left a root state, that mean's I only want change the right part.
3. I reuse this layout template(load different root state and right parts)

Here is the plunker: plunker. To archieve this, I made index.html, it has a ui-view, can load layout template. I made layout.html. then, left.html and right.html for root state and content.

app.js

app.config(['$stateProvider',
  function($stateProvider) {
    $stateProvider
      .state("layout", {
        url: '',
        templateUrl: 'layout.html'
      })
      .state("layout.frame", {
        url: '/frame',
        views: {
          left: {
            controller: 'LeftCtrl',
            templateUrl: "left.html"
          }
        }
      })
      .state("layout.frame.right1", {
        url: '/right1',
        views: {
          'right@': {
            controller: 'RightCtrl',
            templateUrl: "right1.html"
          }
        }
      })
      .state("layout.frame.right2", {
        url: '/right2',
        views: {
          'right@': {
            controller: 'RightCtrl',
            templateUrl: "right2.html"
          }
        }
      });
  }
]);

run plunker, click 'left', will show left.html, that great, but click 'right1' won't load right1.html(althought seeing from brower network, right1.html is loaded)

How can I make right1.html be loaded with root state not reload?

P.S. for root state, I refered this question angularjs ui-router - how to build master state which is global across app

I made a one layer nesting version(index1.html), it runs perfectly, but it doesn't support layout templating.

Thanks in advance.

Community
  • 1
  • 1
sww176
  • 125
  • 2
  • 8

1 Answers1

0

You can do it if you set the left to be an absolute view as you set the right views, take a look at this forked plunker http://plnkr.co/edit/ucHkTbRyyKPeUfYwDrJh

Noam
  • 1,018
  • 7
  • 18
  • Thanks for you reply and sorry for my late response. I chekced the forked plunker, it seems not what I want, check this plunker [http://plnkr.co/edit/HXz5jxXDMhJip2E8tKmf](http://plnkr.co/edit/HXz5jxXDMhJip2E8tKmf) ，click 'right1' or 'right2', 'left' is always there, even not reloaded. This is results is what I want, but I have to write solid 'left','right' ui-view in index.html, can't load dynamic layout in index.html, may be I want to change to 'head','content','footer' layout template, I have to modify index.html to have these views. I want to have load layout template ability. – sww176 Mar 11 '14 at 05:48