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屋!