角度UI路由器多个视图，无需更新每个视图

Question

我在使用 Angular UI-Router Framework 时遇到了问题。我在另一个视图中有 2 个嵌套视图，每次我都更改为该"多视图"视图，我设置为子视图的两个控制器都在重新加载这两个的初始方法。因此，当我重新加载页面并且两个视图都更新时，它们都类似于双重更新。这导致这样一个事实，即其中一个控制器通过$http请求两倍的数据。我在控制器中定义的每个方法将执行两次。

是否有可能阻止其中一个视图的更新。我目前的建议是，每次加载新视图时，都会编译所有 ui-views，以便为 2 个视图编译两次。:/

主要内容：

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

我的子视图是这样的：

...
<div ui-view="view1"></div>
<div ui-view="view2"></div>
...

我的应用状态配置：

....
.state('model', {
url:"/model/{modelId}",
controller: 'modelCtrl',
templateUrl: 'partials/model.html'
})
.state('model.Overall', {
views: {
  'view1': {
    templateUrl: 'partials/view1/view.html',
    controller: 'view1Ctrl'
  },
  'view2': {
    templateUrl: 'partials/views2/view.html',
    controller: 'view2Ctrl'
  }
}
})
...

Answer 1

我不确定每个视图的确切用途，但是，如果您需要同时显示它们，您可以尝试让 modelCtrl 触发您需要在加载时发生的方法/函数，而不是子视图控制器。

但是，如果这些子视图正在切换，则可以'model'设置为抽象状态：abstract: true并有一个 ui-view <ui-view="chewy"></ui-view>（我总是说耐嚼，因为它有点耐嚼中心？因此，您将有两个子状态：

.state('model.view1', {
 views: {
  'chewy': {
     templateUrl: 'partials/view1/view.html',
     controller: 'view1Ctrl'
   }
 }
 })
 .state('view2', {
 views: {
   'chewy': {
     templateUrl: 'partials/views2/view.html',
     controller: 'view2Ctrl'
    }
  }
 }) ...