同步Angular ui路由器中的嵌套视图

Synchronizing nested views in Angular ui-router

本文关键字：嵌套 视图 路由器 Angular ui 同步      更新时间：2023-09-26

我的"根"状态包括整个应用程序存在的两个视图：

  //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>'    
     //...   
 })

这些"嵌套"的UI视图是我的应用程序状态的主要目标，每个应用程序状态都将不同的元素加载到其中：

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

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

也就是说，我被ui-router的resolve功能所吸引，我正在考虑围绕它组织我的策略：
每个状态的解析函数根据状态参数确定需要什么数据，然后将这些数据注入每个视图的单独控制器中，将用这些视图实例化
如果我将这些数据放在服务或共享作用域中，那么我就可以使用双向数据绑定来保持两个视图的同步。

对吗

  • 这种方法是否存在我可能忽略的陷阱？

  • 有没有一种更简单的方法我忽略了？

  • 你会认为这是一种"棱角分明的方式"吗
    （我做这一切都是为了学习，因为我试图把我的头裹在棱角分明的周围）

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

也许只是把这两个子视图的逻辑放在一个控制器中。

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将包含两个视图的逻辑。控制器中的$范围将可用于两个包含的模板。

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

相关文章：