javascript - 导航到子状态也会刷新其父状态

Question

我将尝试提供一个示例伪代码，以便能够尽可能详细地解释我的问题。我无法将工作代码放在这里，因为那里涉及的层、指令和模板太多。

我的基本结构是:

...
<div>
   <div ui-view>
       <div ui-view></div>
   </div>
</div>
...

当父级 ui-view 中的代码执行 $state.go 更新子级 ui-view 时，父级也被加载再次。

假设父状态称为contact，子状态是details。我的 $state.go 调用是 $state.go("contact.details")，$stateProvider 配置如下所示:

$stateProvider.state({ name: "contact" /*,  rest of properties */ });
$stateProvider.state({ name: "contact.details", /*,  rest of properties */ });

此外，整个子 ui-view 发生在一个指令嵌入中。假设它将是:

<div>
   <div ui-view>
       <directive>
           <content>
                <div ui-view></div>
           </content>
       </directive>
   </div>
</div>

根据这些详细信息，您是否发现任何问题？为什么 $state.go("contact.details") 也重新加载 contact？ (注意 contact.details 已加载，但重新加载 contact 会产生副作用，因为 Controller 会再次执行...)。

更新

如果我在 contact 的 Controller 上调用 $state.go("details")，它会发生同样的问题，但是一旦它被加载，当我 $state.go 到其他子状态，每个子状态都按预期打开，但再次调用父状态的 Controller 。

Answer 1

我没有问题，但我和你有不同，我的父状态要么是抽象的，要么重定向到他的 Controller 中的默认子状态。

所以我会

$stateProvider.state({ name: "contact" /*,  rest of properties */ 
      controller:['$state', function($state){
         if($state.current.name=='contact'){
              $state.go('contact.main');
         }
      }]
 });
$stateProvider.state({ name: "contact.main", /*,  rest of properties */ 
$stateProvider.state({ name: "contact.details", /*,  rest of properties */ });