Question

我有索引页面，如下所示：

<!DOCTYPE html>
<html ng-app="libraryApp">
<head>
<meta charset="UTF-8">
<title>Angular Library</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="page/js/angular-route.js"></script>
<script src="page/js/app.js"></script>
<script src="page/js/controllers.js"></script>
<script src="page/js/services.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

我还有app.js：

var app = angular.module('libraryApp', ['ngRoute', 'libraryControllers']);

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: 'page/booksList.html',
            controller: 'booksListController'
        })
        .when('/library/bookDetails/:bookId', {
            templateUrl: 'page/bookDetails.html',
            controller: 'bookListController'
        });
}]);

控制器：

var libraryControllers = angular.module('libraryControllers', ['libraryServices']);


    libraryControllers.controller('booksListController', function($scope, $http, BookFactory){

            BookFactory.getAllBooks()
            .success(function(response){
                $scope.books = response;
            });

            $scope.bookIsNotSelected = false;

            $scope.selectedBook = { id: 0 };

            $scope.showDetails = function(){

                if ($scope.selectedBook.id == 0){
                    $scope.bookIsNotSelected = true;
                }
                else {
                    BookFactory.showDetails($scope.selectedBook.id);
                }
            };  
        });

和services.js：

var services = angular.module('libraryServices', []);

services.factory('BookFactory', function($http) {

    var bookFactory = {};

    bookFactory.getAllBooks = function() {
        return $http.get('getBooksList');
    }

    bookFactory.showDetails = function(bookId){
        var request = 'library/bookDetails/' + bookId;
        return $http.get(request);
    };

    return bookFactory;
});

我的问题是当我单击带有showDetails（）ng-click功能的按钮时，我向Spring Rest Controller发送请求以获取指定的书籍数据。一切正常，我得到JSON对象，但我的routeProvider没有将我重定向到page / bookDetails.html页面。

正如您所见，Http GET请求是正确的。我无法弄清楚为什么它不会将我重定向到bookDetails.html页面。伙计们好吗？我卡住了

Answer 1

基本上发出ajax请求不会改变浏览器中的URL，你需要使用$location服务在路由之间重定向（不要忘记在控制器函数中注入$location依赖）。

您应该使用$location.path重定向到指定路径。

bookFactory.showDetails = function(bookId){
    var request = 'library/bookDetails/' + bookId;
    return $location.path(request);
};

相反，您可以在锚标记上使用href，而不是使用ng-click指令

<a ng-href="/library/bookDetails/{{obj.bookId}}">Show Details</a>

这将完全解决您的问题。您应该为bookDetails页面创建一个新的控制器，而不是使用可以命名为booksListController的{{1}}（违反单一责任原则），因此详细信息路由将更改为以下内容。

bookDetailsController

现在.when('/library/bookDetails/:bookId', { templateUrl: 'page/bookDetails.html', controller: 'bookDetailsController' });将具有通过ajax调用加载图书详细信息的逻辑。基本上会有一种方法可以使用bookDetailsController等$routeParmas服务从{URL}读取参数。将bookId传递给服务器以检索书籍细节。

Answer 2

进行HTTP GET调用时不会发生重定向，当您更改客户端的URL时会发生重定向：

将$location注入您的控制器：

libraryControllers.controller('booksListController', function($scope, $http, BookFactory, $location){

然后按原样使用：

$scope.showDetails = function(){
   if ($scope.selectedBook.id == 0){
      $scope.bookIsNotSelected = true;
   }
   else {
     BookFactory.showDetails($scope.selectedBook.id).then(function(res) {
        // Redirect occurs here..
        $location.path('library/bookDetails/' + $scope.selectedBook.id);
     });
   }
 };

AngularJS routeProvider重定向不起作用

2 个答案: