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