ui-view中的Angular UI-Router ui-view

Question

我在index.html中有ui-view ，並且有一個信息頁面，我想在其中放置帶有4個鏈接的第二個ui-view。

在我的index.html中

<body ng-app="myApp">
    <div ui-view></div>
</body>

這是我的信息。 我想在info.html頁面info-number.html中打開default。

<div class="col-sm-8" style="border:1px solid; min-height:
  <h1>Some text</h1>
  <div ui-sref></div>
</div>

這是我的應用程序。

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
    .state("home", {
        url: "/home",
        templateUrl: "home.html"
    })
    .state("info", {
        url: "/info",
        templateUrl: "info.html",
    })
    .state("info-number", {
        abstract: true,
        parent: "info",
        url: "/info-number",
        templateUrl: "info-number.html"
    })
    .state("info-about", {
        parent: "info",
        url: "/info-about",
        templateUrl: "info-about.html"
    })
    .state("info-where", {
        parent: "info",
        url: "/info-where",
        templateUrl: "info-where.html"
    })
  }
]);

我的頁面的架構信息

感謝幫助。

Answer 1

您無需將info-number設為abstract即使它是默認的。

您的abstract視圖應該是info 。 因此，當用戶單擊“信息”鏈接（按鈕）時，您可以將其默認重定向到info/info-number 。

我將其寫為：

$stateProvider
        .state("home", {
            url: "/home",
            templateUrl: "home.html"
        })
        .state("info", {
            url: "/info",
            abstract: true,
            templateUrl: "info.html",
        })
        .state("info.info-number", {
            url: "/info-number",
            templateUrl: "info-number.html"
        })
        .state("info.info-about", {                
            url: "/info-about",
            templateUrl: "info-about.html"
        })
        .state("info.info-where", {               
            url: "/info-where",
            templateUrl: "info-where.html"
        })

info.html結構類似於：

<div>
    <h1>Some Text</h1>
    <div ui-view></div>
</div>

ui-view中的Angular UI-Router ui-view

問題描述

1 個解決方案

解決方案1
0 已采納 2017-08-16 09:10:08

ui-view中的Angular UI-Router ui-view

問題描述

1 個解決方案

解決方案1 0 已采納 2017-08-16 09:10:08

解決方案1
0 已采納 2017-08-16 09:10:08