所以我一直在关注如何使用 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>
最佳答案
由于您正在使用嵌套状态和 View (“home.list”嵌套在“home”内),因此您需要包含 <div ui-view></div>
也在你的 home.html 中。
欲了解更多信息:https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
祝你好运! :)
关于javascript - Angular UI 路线状态未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34444305/