Question

我正在使用ui-router用于以下目的：

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)

以下是plunker：plunker。为了实现这一点，我制作了index.html，它有一个ui-view，可以加载布局模板。我做了layout.html。然后，left.html和right.html用于根状态和内容。

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"
          }
        }
      });
  }
]);

运行plunker，点击'left'，将显示left.html，那很棒，但点击'right1'将不会加载right1.html（虽然从浏览器网络看到，加载了right1.html）

如何使right1.html加载root状态而不重载？

P.S。对于根状态，我提到了这个问题angularjs ui-router - how to build master state which is global across app

我制作了一个单层嵌套版本（index1.html），它运行完美，但它不支持布局模板。

提前致谢。

Answer 1

如果在设置正确的视图时将左侧设置为绝对视图，则可以执行此操作，看看这个分叉的羽毛球http://plnkr.co/edit/ucHkTbRyyKPeUfYwDrJh

具有双嵌套的angular ui路由器使root状态无法加载子状态

1 个答案: