有人可以帮助我使用 ui-router 吗？ 我不明白嵌套 View 中 ui-route 构造 URL 的行为。 看下面的代码。有嵌套的 View 。如果我单击 [类(class)]，我会看到 http://localhost:8080/#/courses网址。这是正确的。但如果我接下来点击[类(class)#1]，URL 就会变成 http://localhost:8080/# 。剩下的网址在哪里？但是，如果我单击 [Lessons]，URL 就会变成预期的那样 - http://localhost:8080/#/courses/1/lessons 那么，中间状态出了什么问题呢？
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Trial app</title>
<!-- inject:css -->
<!-- endinject -->
<!-- bower:css-->
<!-- endbower-->
</head>
<body>
<h1>Trial App</h1>
<a ui-sref="courses">[Courses]</a>
<ui-view></ui-view>
<!-- bower:js-->
<script src="lib/bower/angular/angular.js"></script>
<script src="lib/bower/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower-->
<!-- inject:js -->
<script src="js/app.js"></script>
<!-- endinject -->
</body>
</html>
appp.js
'use strict';
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('CoursesListCtrl', function ($log, $state, $scope) {
$scope.selectCourse = function (courseId) {
$state.go('courses.course', {courseId: courseId});
};
});
myApp.controller('CourseCtrl', function ($log, $state, $scope) {
$scope.courseId = $state.params.courseId;
});
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('courses', {
url: '/courses',
template: '<h2>Courses</h2>' +
'<a href="#" ng-click="selectCourse(1)">[Course #1]</a><br>' +
'<ui-view></ui-view>',
controller: 'CoursesListCtrl'
})
.state('courses.course', {
url: '/{courseId}',
template: '<h3>Course #{{courseId}}</h3>' +
'<a ui-sref="courses.course.lessons">[Lessons]</a><br>' +
'<ui-view></ui-view>',
controller: 'CourseCtrl'
})
.state('courses.course.lessons', {
url: '/lessons',
template: '<h3>Lessons</h3>'
})
;
});
最佳答案
您的第一个模板应该是 anchor ，它应该更改，您可以使用 ui-sref 创建一个 href > 动态
标记
<a ui-sref="courses.course({courseId: 1})">[Course #1]</a><br>
上面的 ui-sref 将创建动态网址，其中可能包含 href="#/courses/1"
关于javascript - ui-router状态url问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31929029/