Question

根据标题，我一添加路线：

    .when('/cluster/:clusterName/node/:nodeId', {
      templateUrl: 'partials/node/view.html',
      controller: nodeViewController
    })

并尝试访问它，浏览器选项卡在JavaScript控制台中崩溃：

RangeError: Maximum call stack size exceeded
    at nodeLinkFn (http://127.0.0.1:8080/libs/angular/angular.js:6695:34)
    at compositeLinkFn (http://127.0.0.1:8080/libs/angular/angular.js:6086:13)
    at compositeLinkFn (http://127.0.0.1:8080/libs/angular/angular.js:6089:13)
    at compositeLinkFn (http://127.0.0.1:8080/libs/angular/angular.js:6089:13)
    at compositeLinkFn (http://127.0.0.1:8080/libs/angular/angular.js:6089:13)
    at publicLinkFn (http://127.0.0.1:8080/libs/angular/angular.js:5982:30)
    at link (http://127.0.0.1:8080/libs/angular-route/angular-route.js:919:7)
    at nodeLinkFn (http://127.0.0.1:8080/libs/angular/angular.js:6692:13)
    at compositeLinkFn (http://127.0.0.1:8080/libs/angular/angular.js:6086:13)
    at publicLinkFn (http://127.0.0.1:8080/libs/angular/angular.js:5982:30) <div class="col-lg-12 ng-scope" ng-view="">

我不明白为什么会发生这种情况，因为我是AngularJS的新手，所以我不知道进一步调试它。这是我的完整app.js：

'use strict';

angular.module('dopeFrontend', ['ngRoute', 'ngResource'])
    .run(function($http, $rootScope, $location) {
      //$http.defaults.headers.post['X-CSRFToken'] = $('input[name=_csrf_token]').val();
      $rootScope.location = $location;
    })
    .config(['$routeProvider', '$locationProvider',
      function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
              templateUrl: 'partials/core/clusters.html',
              controller: indexController
            })
            .when('/login', {
              templateUrl: 'partials/auth/login.html',
              controller: loginController
            })
            .when('/create', {
              templateUrl: 'partials/core/create_cluster.html',
              controller: clusterCreateController
            })
            .when('/connect', {
              controller: clusterConnectController
            })
            .when('/cluster/:clusterName', {
              templateUrl: 'partials/cluster/overview.html',
              controller: clusterOverviewController
            })
            .when('/cluster/:clusterName/nodes', {
              templateUrl: 'partials/node/nodes.html',
              controller: nodesViewController
            })
            .when('/cluster/:clusterName/node/add', {
              templateUrl: 'partials/node/add.html',
              controller: nodeAddController
            })
            .when('/cluster/:clusterName/node/:nodeId', {
              templateUrl: 'partials/node/view.html',
              controller: nodeViewController
            })
            .otherwise({
              redirectTo: '/'
            });
        $locationProvider.html5Mode(true).hashPrefix('!');
      }]);

我使用的是AngularJS 1.2.22，Google Chrome 36.0.1985.125，AngularJS应用程序通过本地Nginx服务器提供。这是相关的配置：

root   /Users/alex/dev/dope/dope/static;
index index.html;

location / {
    expires -1;
    add_header Pragma "no-cache";
    add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
    try_files $uri $uri/ /index.html =404;
}

如何解决此问题或进一步调试？

Answer 1

我刚刚发现HTML5模式下相对网址需要<base>标记。

本文档中提到$location guide：

相对链接

请务必检查所有相关链接，图片，脚本等。您必须在主html文件（<base href="/my-base">）的头部指定网址基础，或者必须使用绝对网址（以{{1开头）无处不在，因为相对网址将使用文档的初始绝对网址解析为绝对网址，这通常与应用程序的根目录不同。

强烈建议在文档根目录下启用历史记录API运行Angular应用程序，因为它会处理所有相关链接问题。

当我定义一个包含两个参数的路由时，AngularJS崩溃

1 个答案: