AngularJS stateprovider視圖模板

Question

WikiApp.config(function config($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('revision', {
        url: '/wiki',
        views: {
            "main": {
                controller: 'ListCtrl',
                templateUrl: 'wiki/wiki.tpl.html'
            },
            "sidebar-left": {
                templateUrl: 'wiki/wiki.sidebar-left.tpl.html'
            }
        },
        data:{ pageTitle: 'List articles' }
    })

這是我的Angular位的樣子，這是我在模板（ wiki.tpl.html ）中執行它的方式：

<div ui-view="sidebar-left"></div>

現在main視圖可以正常工作，但是當我嘗試集成側邊欄時，它不會加載，我在做什么錯，如何在單個頁面中使用多個這樣的模板？

謝謝！

Answer 1

WikiApp.config(function config($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('revision', {
        url: '/wiki',
        views: {
            main: {
                controller: 'ListCtrl',
                templateUrl: 'wiki/wiki.tpl.html'
            },
            sidebarLeft: {
                templateUrl: 'wiki/wiki.sidebar-left.tpl.html'
            }
        },
        data:{ pageTitle: 'List articles' }
    })

Answer 2

如果要使用嵌套模板，則應使用子視圖來實現。 在當前示例中，您將兩個模板都設置為兄弟模板。

我建議您創建2個狀態。 主模板“ main”和另一個視圖“ main.wiki”的抽象視圖。 路由應分配給“ main.wiki”狀態，它將從主視圖繼承參數（包括模板設置）。

希望很清楚。