UI路由器多视图单个控制器

一尘不染

UI路由器多视图单个控制器

angularjs

一个单例控制器是否可能具有多个视图 [https://github.com/angular-ui/ui-
router/issues/494]？

用例：我有一个ui-view = header和ui-view =
content。我根据当前状态更改标题以显示上下文相关的按钮（即返回，保存，过滤等）。我希望这些按钮在内容控制器中调用一个函数，但是如果执行以下操作，它将创建两个MyController对象。如果有任何初始化函数，它们将被调用两次，这在大多数情况下是对我服务器的查询的两倍。

views:{
  'header':{
    templateURL:'...',
    controller:'MyController'
  },
  'content':{
    templateURL:'...',
    controller:'MyController'
  }
}

更新：基于@pankajparkar

我当前的index.html看起来像这样（为便于理解而简化）

<nav ui-view="header"></nav>
<div ui-view="content"></div>

但是您的建议将包含/需要子视图

<!--index.html-->
<body ui-view></body>

<!--format.html-->
<nav ui-view="header"></nav>
<div ui-view="content"></div>

使用以下控制器

state('app', {
  url: '/app',
  controller: 'MyController',
  templateURL: 'format.html', //Targets ui-view in index.html
  views:{
    'header':{
      templateURL:'...', //Targets ui-view="header" in format.html
    },
    'content':{
      templateURL:'...', //Targets ui-view="header" in content.html
    }
  }
});

阅读 209

2020-07-04

共1个答案

一尘不染

基本上，您需要在单身人士的某种提供程序（通常是服务或工厂）中处理此类事务，然后可以将单身人士注入到控制器中，并且控制器的每个实例都将使用共享/相同的提供程序。

如果您需要帮助来实现此功能，请共享您的控制器。

尽管我确实同意此处发布的其他答案中的建议，但是您可能仍要考虑将功能放在提供程序中。在大多数情况下，最好将大多数功能和数据存储在提供程序中，并且让您的控制器仅负责传递用户交互以触发提供程序中的适当调用（这将解决您当前的问题，因为它们单身人士）。

2020-07-04