UI-Router 多视图单控制器

Question

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

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

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

更新：基于@pankajparkar

我现在的 index.html 看起来像这样（为理解而简化）

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

但是你的建议是of/REQUIRE个子视图

<!--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
    }
  }
});

Answer 1

你基本上需要在某种提供者（通常是服务或工厂）中处理这类东西，它们是单例，然后你可以将单例注入控制器，控制器的每个实例都将使用shared/same 提供商。

如果您在实施此方面需要帮助，请分享您的控制器。

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

Answer 2

您应该将该控制器放在 views 选项之外，这样它只会在页面上加载一次

$stateProvider.state("abc",{
   url:'/abc',
   templateUrl: 'abc.html',
   controller:'MyController', //<---place it here will load it once
    views:{
    'header':{
        templateURL:'...'
    },
    'content':{
       templateURL:'...'
     }
   }

})

Answer 3

我是这样工作的：

$stateProvider.state("abc",{
   url:'/abc',
    views:{
    '':{
        templateUrl: 'abc.html',
        controller:'MyController' <-- it's also attached to subviews
    },
    'header@abc':{
        templateURL:'...'
    },
    'content@abc':{
       templateURL:'...'
     }
   }

})

UI-Router 多视图单控制器

UI-Router Multiple Views Single Controller

angularjs

angular-ui-router