具有多个视图的angular ui路由器状态&控制器实例化

angular ui-router states with multiple views & controller instantiation

本文关键字：状态 amp 实例化 控制器 路由器 ui 视图 angular      更新时间：2023-09-26

好吧，我在angular和ui路由器方面有相当多的经验，但在我的应用程序架构方面遇到了问题。我有一些状态，比如：

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>

客户端列表.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，尽管状态实际上没有改变（嗯，url的:id部分确实改变了）。

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

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

但有一个设置：

重新加载搜索

布尔值（默认值true）。如果为false，则不会因为搜索/查询参数已更改而重新触发相同的状态。当您希望在不触发重载的情况下修改$location.search（）时非常有用。

我在这里创建了一个示例，展示了如何在搜索时打开重载。

  • 状态变化确实会触发重新加载
  • 参数更改不会

代码段：

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

可以说，默认行为是我们所需要的，即使使用解析器也是如此。但是检查此处的操作更改

相关文章：