Question

我正在尝试使用所选的objectID导航到另一个页面。角度路由，

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.when('/',{
    controller: 'BooksController',
    templateUrl: 'views/books.html'
})  
.when('/books/details/:id',{
    controller: 'BooksController',
    templateUrl: 'views/book_details.html'
})   
});

角度控制器：

    var myApp = angular.module('myApp');

myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams){
  console.log('BooksController loaded...');

 // This To get request all the books: it works fine   
  $scope.getBooks = function(){
    $http.get('/api/books').then(function(response){
      $scope.books = response.data;
    });
  }

   // This to get request a book with specific id it works fine
  $scope.getBook = function(){
    var id = $routeParams.id;
    $http.get('/api/books/'+id).then(function(response){
      $scope.book = response.data;
    });
  }

}]);

然后我有这个html页面工作也很好接受页面中的按钮，这个按钮应该给我一个干净的templateUrl导航到另一个html页面，但它给了我奇怪的URL：

<div class="panel panel-default" ng-init="getBooks()">
<div class="panel-heading">
  <h3 class="panel-title">Latest Books</h3>
</div>
<div class="panel-body">
  <div class="row">
      <div ng-repeat="book in books">
          <div class="col-md-6">
              <div class="col-md-6">
                  <h4>{{book.title}}</h4>
                  <p>{{book.description}}</p>
                  <a class="btn btn-primary" href="#/books/details/{{book._id}}">View Details</a>
              </div>
              <div class="col-md-6">
                  <img class="thumbnail" src="{{book.image_url}}">
              </div>
          </div>
      </div>
  </div>
</div>

一旦我按下按钮，我就应该得到一个干净的网址，例如： http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab 但相反，我得到这个网址！ http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab

Answer 1

好像你有hashprefix !，那么你的网址在哈希（!）之后也应该有#

href="#!/books/details/{{book._id}}"

由于Angular 1.6 hashprefix默认为!，您可以将hashPrefix设置为''（空白）来禁用此行为。

.config(['$locationProvider', 
  function($locationProvider) {
     $locationProvider.hashPrefix('');
  }
]);

Answer 2

因为您的网址已转换为代码。％2f表示/.

您需要具有此配置以避免角度

的此行为

myApp.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Answer 3

您在url中有Prefix，它正在转换为字符，即url编码。因此，您需要通过将其值替换为空/空字符串来修复$ locationProvider的hashPrefix属性

     $locationProvider.hashPrefix('');

Angular给出一个奇怪的templateURL

3 个答案: