如何在其他ui-view中重用angularJS UI视图

时间:2016-02-25 19:17:06

标签: angularjs uiview angular-ui-router

所以我想要两个大页面。我无法使用ui-view,因为许多widgets/ sections个视图已共享(它们会保留在屏幕上而不加载)。用户点击按钮的那一刻,应用程序应该移动到另一个状态,只有其他部分随着某些动画而变化。 现在,我到现在为止尝试的是嵌套视图。但这些只是一个定向自上而下的架构。我找不到分享观点的方法。 我不是仅使用ng-include或指令,因为我希望它遵循逐州的方法,使用映射到其自己的模板的URL保持历史记录的完整性。 许多视图有可能重用/共享内部视图,如小部件。

配置

$stateProvider.state('dashboard',{
    url : "/dashboard",
    views : {
        'dashboard' : {
            templateUrl: './templates/dashboard.html'
        }
    }
}).state('dashboard.personalDetails', {
    url : '/personalDetails',
    views : {
        'main' : {
            templateUrl: "./templates/personalDetails.html"
        }
    }
}).state('shipment',{
    url : '/personalDetails',
    views : {
        localView1 : {}
        localView2 : //reuse the personal details view
    }
})

这只是一个例子,我基本上希望将我的视图重用为多个页面中的小部件。 ui-router有可能吗?如果是,那怎么办?

PS:不要继续这个具体的例子。实际实现是针对银行应用程序中的交易详情页面。由于政策,我无法共享该代码结构。

1 个答案:

答案 0 :(得分:1)

不确定你在问什么,但你总是可以创建对象来表示类似的视图并将这些对象传递给状态定义

var subviews_1={
    'widget_1' {templateUrl: '..'},
    'widget_2' {templateUrl: '..'},
}

$stateProvider.state('shipment',{
    url : '/personalDetails',
    views : subviews_1
})