具有多个视图和控制器实例化的角度 ui-router 状态答案

【问题标题】：angular ui-router states with multiple views & controller instantiation具有多个视图和控制器实例化的角度 ui-router 状态
【发布时间】：2014-10-01 13:38:13
【问题描述】：

好的，我在 Angular 和 ui-router 方面有相当多的经验，但在我的应用架构方面遇到了问题。我有一些状态，例如：

main.module.js

.state('main', {
    abstract: true,
    controller: 'MainCtrl',
    template: '<div ui-view />'
}).state('main.clients', {
    url: '/clients/:id',
    views: {
        list: {controller: 'ClientListCtrl', templateUrl: 'client-list.html'},
        detail: {controller: 'ClientDetailCtrl', templateUrl: 'client-detail.html'}
    }
}.state('main.services', {
    url: '/services/:id',
    views: {
        list: {...},
        detail: {...}
    }
}

main.html

<div>
    <div ui-view='list'></div>
    <div ui-view='detail'></div>
</div>

client-list.html

<ul>
    <li data-ng-click='$state.go('main.clients({id: client.id})' 
        data-ng-repeat='client in clients'>
        {{client.name}}
    </li>
</ul>

这一切似乎都运行良好，并且按照我的预期填充了视图。我的主要问题是，当我处于main.clients 状态并且用户单击客户端名称时，$state.go(...) 会触发，它会重新初始化ClientListCtrl 和ClientDetailCtrl，即使状态没有实际上发生了变化（嗯，网址的:id 部分确实发生了变化）。

我是否滥用了多个视图？建议改变架构吗？只是试图围绕如何以最有效的方式构建它，并且在这种情况下控制器重新初始化似乎没有必要，但我可能遗漏了一些东西。谢谢！

【问题讨论】：

重新初始化是什么意思？你如何定义它？实际上，您将访问不同的 URL，并且那里的所有数据可能都不同。所以必须更新范围。对我来说这是正常行为。
你可能是对的。用例是我在左侧有一个项目列表，单击时会更新右侧的“详细信息”区域。所以我有一个ClientListCtrl 和ClientDetailCtrl。例如，当我进入新的 main.client 状态（其中 :id 更改）时，ClientListCtrl 正在重新初始化。我说重新初始化是因为 ClientListCtrl 的控制器每次都在运行，即使它不需要更新。
但 ungular 不知道列表中只有一个控制器需要更新，其他控制器保持不变。如果是这种情况，您可能需要将该控制器移至父状态。还要给 paranet satte 一个 URL 并使其不抽象。然后，每次更改状态时，父级都会初始化一个控制器，而另一个子级将初始化一个。

标签： javascript angularjs angular-ui-router multiple-views

【解决方案1】：

在 99% 的情况下，我们想要（我会说）状态或参数更改时重新加载。新参数将意味着不同的列表/详细信息。

但是有一个设置：

reloadOnSearch

布尔（默认为真）。如果 false 不会仅仅因为搜索/查询参数已更改而重新触发相同的状态。当您想修改 $location.search() 而不触发重新加载时很有用。

我创建了an example here，展示了如何在搜索时关闭重新加载。

状态更改会触发重新加载，
参数更改不会

sn-p:

  .state('index', {
      url: '/index/:area',
      ...
    })
    .state('index.detail', {
      url: '/detail/:id',
      reloadOnSearch : false,
      ...

会说，即使使用解析器，默认行为也是我们需要的。但是......检查行动的变化here

【讨论】：