ui路由器状态URL问题

Question

这里有人可以通过ui-router帮助我吗？ 我不了解在嵌套视图中通过ui-route构造URL的行为。 看下面的代码。 有您的嵌套视图。 如果单击[课程]，则会看到http：// localhost：8080 /＃/ courses URL。 没错 但是，如果此后我单击[Course＃1]，则URL变为http：// localhost：8080 /＃。 URL的其余部分在哪里？ 但是，如果我单击[教训]，URL就会变成预期的样子-http：// localhost：8080 /＃/ courses / 1 /教训那么，中间状态怎么了？

的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>'
        })
    ;
});

Answer 1

您的第一个模板应为anchor具有href='#'应更改，您可以使用ui-sref动态创建href

标记

<a ui-sref="courses.course({courseId: 1})">[Course #1]</a><br>

在ui-sref上方将创建动态网址，该网址可能具有href="#/courses/1"

ui路由器状态URL问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-08-10 21:01:33

ui路由器状态URL问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-08-10 21:01:33

解决方案1
1 已采纳 2015-08-10 21:01:33