javascript - Angular UI 路线状态未显示

Question

所以我一直在关注如何使用 AngularJS ui 路由的教程。我设法让 View 正常工作。然而，在试图让各州发挥作用的过程中，却没有奏效。我完全按照教程进行操作，但由于某种原因，我的状态刚刚出现。希望有人可以帮助我。

Scirpt.js

var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {

    // For any unmatched url, redirect to /home
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'views/home.html',
            controller: 'homeCtrl'
        })
        .state('home.list', {
            url: '/list',
            templateUrl: 'views/partial-home-list.html',
            controller: function($scope) {
                $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
            }
        })
        .state('home.paragraph', {
            url: '/paragraph',
            template: 'I could sure use a drink right now.'
        })
        .state('about', {
        url: '/about',
        templateUrl: 'views/about.html',
        controller: 'aboutCtrl'
        })
        .state('/views/about', {
            // Figure out later    
        });

});

index.html

 <!-- Page Content -->
        <div id="page-content-wrapper" ng-app="routerApp">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Content Page</h1>
                        <p>This is where the template of the vast amount of pages will be loaded. This will keep it a single page applcatino. The 
                           main page will inject the html that needs to be loaded to the user. While the top nav bar will allow the user to 
                           view the rest of the website, which will be separate pages 
                        </p>
                        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
                        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                    </div>
                </div>
            </div>
            <!-- Angular Template, this is where content will be injected -->
            <div ng-include="pages"></div>
            <div ui-view></div>
        </div>
    </div>

home.html

<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>

    <a ui-sref=".list" class="btn btn-primary">List</a>
    <a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>

</div>

partial-home-list.html

<div>
<ul>
    <li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
</div>

笨蛋 http://plnkr.co/edit/cN5uM1m20DHGps8cZgzt

Answer 1

由于您正在使用嵌套状态和 View (“home.list”嵌套在“home”内)，因此您需要包含 <div ui-view></div>也在你的 home.html 中。

欲了解更多信息:https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

祝你好运! :)