Angular 给出了一个奇怪的 templateURL

Posted 2023-03-05

【中文标题】Angular 给出了一个奇怪的 templateURL

【英文标题】：Angular giving a weird templateURL

【发布时间】：2018-01-29 17:47:50

【问题描述】：

我正在尝试使用选定的 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

【参考方案1】：

您在 url 中有前缀，它正在转换为字符，即 url 编码。 所以你需要修复 $locationProvider 的 hashPrefix 属性，将其值替换为空/空白字符串

     $locationProvider.hashPrefix('');

【参考方案2】：

好像你有哈希前缀!，那么你的网址也应该在哈希后有!(#)

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

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

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

【讨论】：

感谢队友，我在这个问题上挣扎了大约 3 个小时！！

@AbdallahRizk 很高兴知道这有帮助，谢谢 ;)

【参考方案3】：

这是因为您的网址正在转换为代码。 %2f 表示 /。

你需要有这个配置来避免这种角度的行为

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