Question

我的＆＃34; root＆＃34; state包括整个应用程序存在的两个视图：

  //index.html 
  <body ui-view> 
      <under-pane ui-view = "underpane"></div>
      <over-pane ui-view = "overpane"></div>
   </body>

underPane和overPane指令具有包含所有状态中存在的静态元素的模板，每个模板还包含其自己的ui-view。

//directives.js
.directive('overPane', function(){
     template: '<div ... ><div ui-view="overpaneView"></div></div>'
     //...
 }).directive('underPane', function(){
      template:'<div ... ><div ui-view="underpaneView"></div></div>'    
     //...   
 })

这些＆＃34;嵌套＆＃34; UI视图是我的应用程序状态的主要目标，每个状态都会在每个状态中加载不同的元素：

//app.js          
}).state('foo', {
   views: { 
     'overpaneView@':{ } //loaded into the ui-view nested in the overPane directive 
     'underpaneView@' : { }     
    })

在每种状态下保持这些视图同步的最简洁方法是什么？
据我所知，我不能在状态上使用控制器，因为除非加载模板，否则不会实例化控制器，并且当状态具有views属性时会覆盖模板。

那就是说，我对resolve ui-router的{{1}}功能非常感兴趣，而且我正考虑围绕它组织我的策略：
每个状态的解析函数根据状态参数确定所需的数据，然后将该数据注入每个视图的单独控制器中，将用这些视图实例化。
如果我将这些数据放在服务中或共享范围内，我可以使用双向数据绑定来保持两个视图同步。

对吗？

使用这种方法我可能会忽略任何陷阱吗？
我有一个更简单的方法吗？
你会认为这是一种有角度的方式吗？这样做？
（我将这一切都当作一种学习练习，因为我试图将头部包裹在角度上）

Answer 1

如果您想要同步状态和数据，您将会遇到很多工作。

也许只是将这2个子视图的逻辑放入1个控制器中。

的index.html

<body>
  <div data-ng-view>
  </div>
</body>

路线配置：

$routeProvider
   .when(ROUTES.LOGIN, {
      templateUrl: 'dashboard.html',
      controller: 'DashboardController'
    })

视图（dashboard.html）：

<div ng-include="templateOfOverpaneView"></div>
<div ng-include="templateOfUnderpaneView"></div>

然后，DashboardController将包含两个视图的逻辑。控制器中的$ scope将可用于两个包含的模板。

这种方法将消除同步状态和数据的必要性。

在Angular ui-router中同步嵌套视图

1 个答案: