2

以下 index.html 页面会导致无限循环。重现:

  1. 在(本地或远程)Web 服务器上下载下面链接的 github 项目(我已经在 plunker 上尝试过,并且没有发生无限循环)
  2. 从您的浏览器请求它。
  3. 点击页面上的 p1p2 链接。

无限循环开始。在服务器端,日志产生:

server request for * handled
GET /p1/p2 304 8ms
server request for * handled
GET /p1/partials/template1 304 4ms

注意这里/p1前面的/partials/template1。那个是从哪里来的?这导致了无限循环,因为 AngularJS 在此 url 处找不到模板并因此进入循环。缩短此/p1/p2AngularJS 路线以/p1以某种方式消除问题。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script>document.write('<base href="' + document.location + '" />');</script>
  </head>
  <body ng-app="minimalApp">
    <p>Index Page That Contains ng-view below..</p>
    <div ng-view></div>
    <p><a ng-href="p1/p2">p1p2</p>
    <p><a ng-href="#">#</p>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script>
      'use strict';
      var minimalApp = angular.module('minimalApp', []).
        config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
          $routeProvider.
            when('/', {
              templateUrl: 'partials/template1',
              controller: IndexCtrl
            }).
            when('/p1/p2', {
              templateUrl: 'partials/template2',
               controller: T2Ctrl
            }).
            otherwise({
              redirectTo: '/'
            });

          $locationProvider.html5Mode(true);
        }]);

      function IndexCtrl($scope) {
      }

      function T2Ctrl($scope) {
      }    
    </script>
  </body>
</html>

(我把html放在这里是为了方便,即使模板是通过jade创建的)

我使用的服务器是 node/express。完整的项目在 github 上。

并且嵌入了模板并且有效的同一个 html 页面在这里

4

1 回答 1

3

'partials/template1' 是相对于你所在位置的,所以当从'/p1/p2' 调用时,浏览器假定你在目录'/p1' 中并从那里构建路径。

如果您添加前面的斜杠,如在“/partials/template1”中,这将始终从网络服务器根目录构建路径。

于 2013-04-28T10:55:48.943 回答