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

查看：23
本文介绍了Angular 给出了一个奇怪的 templateURL的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

var myApp = angular.module('myApp', ['ngRoute']);myApp.config(function($routeProvider){$routeProvider.when('/',{控制器:'书籍控制器'，templateUrl: 'views/books.html'}).when('/books/details/:id',{控制器:'书籍控制器'，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 已加载...');//这个要获取所有书籍的请求:它工作正常$scope.getBooks = function(){$http.get('/api/books').then(function(response){$scope.books = response.data;});}//这是为了获取具有特定 id 的书的请求，它工作正常$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-heading"><h3 class="panel-title">最新图书</h3>
<div class="panel-body"><div class="row"><div ng-repeat="书本"><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}}">查看详情</a>

<div class="col-md-6"><img class="thumbnail" src="{{book.image_url}}">

一旦我按下按钮，我应该得到一个干净的网址，例如:http://localhost:3000/#!/books/details/599701c1f3da511117535b但是我得到了这个网址！http://localhost:3000/#!/#%2Fbooks%2Fdetails%2F5119750/a>

解决方案

好像你有 hashprefix !，那么你的 URL 在 hash(! 之后也应该有 !>#)

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

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

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

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'
})   
});

Angular Controller:

    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;
    });
  }

}]);

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>

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

解决方案

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

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

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 给出了一个奇怪的 templateURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆