Angular给出一个奇怪的模板 [英] Angular giving a weird templateURL

问题描述

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

I am trying to navigate to another page by using the selected objectID. Angular Routing,

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:

And then I have this html page which work also fine accept the button in the page, this button supposed to give me a clean templateUrl to navigate to another html page but it give me weird 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>

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

And once I press the button I'm supposed to get a clean url such as: http://localhost:3000/#!/books/details/599701c1f3da51117535b9ab but instead I get this url! http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F599701c1f3da51117535b9ab

推荐答案

似乎您具有hashprefix !，那么您的URL在hash(#)之后也应该具有!

Seems like you have hashprefix !, then your URL should also have ! after hash(#)

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

由于Angular 1.6 hashprefix默认为!，因此可以通过将hashPrefix设置为''(空白)来禁用此行为.

Since Angular 1.6 hashprefix is defaulted to !, you can disable this behavior by setting hashPrefix to ''(blank).

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

这篇关于Angular给出一个奇怪的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！