Question

我使用AngularJS v1.5.9并使用$ routeParams我一遍又一遍地在Chrome控制台上出现以下错误。

RangeError: Maximum call stack size exceeded
    at la (angular.js:10097)
    at p (angular.js:9492)
    at g (angular.js:8757)
    at angular.js:8637
    at Object.link (angular-route.js:1065)
    at angular.js:1259
    at la (angular.js:10095)
    at p (angular.js:9492)
    at g (angular.js:8757)
    at angular.js:8637

RangeError: Maximum call stack size exceeded
    at Object.error (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:119:129)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:91:305
    at la (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:82:112)
    at p (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:67:274)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:59:252)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:58:394
    at Object.link (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.js:1065:7)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:16:71
    at la (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:82:90)
    at p (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js:67:274) <main ng-view="" class="ng-scope">

我不确定自己做错了什么，我非常关注this example。这是我的app.js：

var app = angular.module('app', ['ngRoute']);  // TODO: 'ngAnimate', 'ui.bootstrap' 

app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){

    $routeProvider
        .when('/', {
            templateUrl: '/app/static/home.html',
            controller: 'mainController as mainCtrl'

        })
        .when('/match/id/:id', {
            templateUrl: 'components/match/matchView.html',
            controller: 'matchController'
        });

    // use the HTML5 History API
    $locationProvider.html5Mode(true);
}]);

app.controller('mainController', [function(){
    var mainCtrl = this;
    mainCtrl.test = 'testing mainController';
}]);

 app.controller('matchController', function ($scope, $routeParams) {
    // var matchCtrl = this;
    $scope.name = 'matchController';
    $scope.params = $routeParams;
 });

更新

当我转到example.com/match/id/123时会发生错误。

当我在chrome检查器中放置断点时，我发现它只是一遍又一遍地进入matchController，但我不明白为什么？当它在断点处停止时，我可以看到$ routeParams具有正确的值。

文件结构非常简单，所有JS都在一个文件app.js中，如上所述。到目前为止我只配置了两条路由。还有两个用于标题，导航和输出的静态模板页脚，但没有控制器。

Answer 1

从路线设置中删除额外ID，看看是否有帮助：

.when('/match/:id', {
     templateUrl: '/app/components/match/matchView.html',
     controller: 'matchController'
});

Answer 2

我知道了，我没有完整的templateURL路径集

templateUrl: 'components/match/matchView.html',

到

templateUrl: '/app/components/match/matchView.html',

导致RangeError的Angularjs $ routeParams：超出了最大调用堆栈大小

更新

2 个答案: