我的"根"状态包括整个应用程序存在的两个视图:
//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将包含两个视图的逻辑。控制器中的$范围将可用于两个包含的模板。
这种方法将消除同步状态和数据的必要性。