angular js ui-Router：子视图覆盖已在父视图中显示的视图答案

【问题标题】：angular js ui-Router : Child view overwrites views already displayed in parentangular js ui-Router：子视图覆盖已在父视图中显示的视图
【发布时间】：2017-08-12 04:45:43
【问题描述】：

参考下面提到的状态结构：

 parent
   |->leftTree
   |->rightTree

在我的 Parent 状态模板中，我有 2 个 ui 视图。

leftTree 配置为在 ui-view="h1" 中显示其内容，而 rightTree 在 ui-view="h2" 中显示其内容

<div ui-view = "h1"></div>
<div ui-view = "h2"></div>

和 2 个按钮

<button type="button" ui-sref="lefttree()" class="btn btn-default">left</button>
<button type="button" ui-sref="righttree()" class="btn btn-default">Right</button>

当我点击左按钮时->“leftTree”模板显示在ui-view =“h1”下

但是当我点击右按钮时 -> "rightTree" 模板显示在 ui-view = "h2" 但 ui-view = " h1" 被删除（我的意思是 ui-view="h1" 完全为空）。

这是预期的行为吗？如何保存 ui-view = "h1" 中的信息

请在下面找到代码：

let a = angular.module("app", ["ui.router"]);
a.config(["$stateProvider", "$urlRouterProvider", function(statepro, urlPro) {

  statepro.state("parent" , {
    url:"/parent",
    template : `<div class="btn-group" role="group" aria-label="...">
                  <button type="button" ui-sref="parent.lefttree()" class="btn btn-default">left</button>
                  <button type="button" ui-sref="parent.righttree()" class="btn btn-default">Right</button>
                </div>
                <div ui-view = "h1"></div>
                <div ui-view = "h2"></div>`,
    controller : function(){
      console.log("creating parent");
    }
  });

  statepro.state("parent.lefttree" , {
    url:"/lefttree",
    views : {
      "h1" : {
        template : `<div class="panel panel-default" style = "width : 30%">
                      <div class="panel-heading">Left Tree</div>
                        <div class="panel-body">
                          left tree
                        </div>
                      </div>
                      </div>`,
        controller : function(){
                        console.log("created left tree");
                      }
      }
    }

  });

  statepro.state("parent.righttree" , {
    url:"/righttree",
    views : {
      "h2" : {
        template : `<div class="panel panel-default" style = "width : 30%">
                      <div class="panel-heading">Right tree</div>
                        <div class="panel-body">
                          right tree
                        </div>
                      </div>
                      </div>`,
        controller : function(){
                        console.log("created right tree");
                      }
      }
    }

  });

urlPro.otherwise("/parent");

}]);

谢谢

【问题讨论】：

请同时添加 lefttree() 和 righttree() 的代码
@Hassan 我已经添加了代码.. 谢谢
您是否要让lefttree 和righttree 并排显示？
@joe .. 是的 .. 我想要的是当 righttree 显示其信息时 leftTree 中的数据不应该被破坏
@Max 您希望lefttree 和righttree 的视图仅在单击链接后显示吗？还是您希望它们立即显示？

标签： angularjs angular-ui-router

【解决方案1】：

我认为您误解了命名视图。一次只能激活一种状态。如果你想通过状态来实现这一点，你需要有parent、parent.lefttree、parent.righttree，以及一个显示两者的附加状态（即parent.bothtrees）。

此fiddle 包含此解决方案的示例。注意状态parent.bothTrees中的重复

【讨论】：