Angular UI-路由器 ui-在ui-视图中查看

Question

我在 index.html 中有 ui-view，我有一个信息页面，我想在其中放置第二个 ui-view，有 4 个链接。

在我的index.html

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

这是我的信息。我想在 info.html 中打开默认页面信息-number.html.

<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" link （按钮）时，您可以默认将他重定向到 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>

Angular UI-路由器 ui-在ui-视图中查看

Angular UI-Router ui-view in ui-view

uiview

angularjs

angular-ui-router

ui-sref