Angularjs 具有双重嵌套的角度ui路由器使根状态无法加载子状态

我使用ui路由器的目的如下：

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)

这是普朗克：。为了对此进行归档，我制作了index.html，它有一个ui视图，可以加载布局模板。我制作了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（尽管从brower网络上看，right1.html已加载）

如何使right1.html在根状态下加载而不是重新加载

附言。 对于根状态，我引用了这个问题

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

---

提前感谢。

如果您将左视图设置为绝对视图，而将右视图设置为绝对视图，

---

看一下这个分叉的插销

谢谢你的回复，也很抱歉我的回复太晚了。我检查了叉形弹片，它似乎不是我想要的，检查这个弹片，点击“right1”或“right2”，“left”总是在那里，甚至没有重新加载。这是我想要的结果，但我必须在index.html中编写坚实的“左”、“右”ui视图，无法在index.html中加载动态布局，可能是我想更改为“头”、“内容”、“页脚”布局模板，我必须修改index.html以获得这些视图。我想有加载布局模板的能力。