AngularJS $ stateProvider加載父模板但不加載子模板

Question

我剛開始遷移到AngularJS，而我已經在angular-ui / ui-router框架中使用$stateProvider遇到了問題。 這是我到目前為止的內容：

angular
    .module('testApp', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/index/home");

        $stateProvider
            .state('index', {
                abstract: true,
                url: "/index",
                template: "parent"
            })
            .state('index.home', {
                url: "/home",
                template: "child"
            })
    })
    .controller("MainController", function() {
    })

現在，運行此腳本會將我重定向到http://example.com/#/index/home但它只會在頁面上顯示父字符串。 子字符串未顯示。 根據我的理解，這應該加載第一個模板，因為我們位於/#/index域部分，然后加載第二個模板，因為我們位於嵌套頁面/#/index/home 。

有人可以幫助我並解釋為什么這沒有按預期進行嗎？

Answer 1

在用於父級的模板中，您需要另一個<div ui-view></div>來呈現子狀態。

如果需要多個嵌套視圖，則可以在父模板中具有多個ui-view 。 您只需要命名它們即可。 例如，

父模板：

<h1>parent</h1>
<div ui-view="child1"></div>
<div ui-view="child2"></div>

然后您定義子狀態如下：

$stateProvider
        .state('index', {
            abstract: true,
            url: "/index",
            template: "parent"
        })
        .state('index.home', {
            url: "/home",
            views: {
             'child1': {
               templateURL: "child1.html"
              }
            }
        })
        .state('index.home2', {
          url: '/home2',
          views: {
           'child2': {
             templateURL: 'child2.html'
          }
          }
        })

*請注意，我使用templateURL而不是template。 假設您的應用具有模塊化文件結構。