Question

所以我一直在关注如何使用AngularJS ui路线的教程。我设法让视图正常工作。然而，在试图使州工作，它只是不工作。我完全按照教程，但由于某种原因我的状态只是出现。希望有人可以帮助我。

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>

局部家庭list.html

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

Plunker http://plnkr.co/edit/cN5uM1m20DHGps8cZgzt

Answer 1

由于您使用的是嵌套状态和视图（＆＃34; home.list＆＃34;嵌套在＆＃34; home＆＃34;），您需要在home.html中包含<div ui-view></div>作为好。

有关详情：https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

祝你好运！：）

Angular UI路由状态未显示

1 个答案: