Question

尝试复制一个简单的路由示例w3schools，但在访问index.html时，控制台中的“RangeError：超出最大调用堆栈大小”会不断崩溃。

我尝试添加/删除部分代码以隔离问题，而崩溃似乎发生在<div ng-view></div>。这是为什么？我从原始例子中做出的改变并不那么激烈。

这是代码

的index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="app.js"></script>

</head>

<body ng-app="myApp">

<a href="#!red">Red</a>
<a href="#!green">Green</a>

<div ng-view></div>

</body>
</html>

app.js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "index.html"
    })
    .when("/red", {
        templateUrl : "red.html"
    })
    .when("/green", {
        templateUrl : "green.html"
    });
});

red.html

This is red

green.html

This is green

Answer 1

是的，index是其他视图的容器。您应该放置部分视图而不是索引。问题出在这里：

$routeProvider
    .when("/", {
        templateUrl : "index.html"
    })

该模板url将在ng-view中加载完整的index.html，这将加载另一个index.html，并为无限和Secula Seculorum添加新的ng-view。

简单修复：创建一个新视图（就像你拥有的其他路径一样）并将其放入templateUrl

Answer 2

您正在使用此声明循环播放应用程序。

$routeProvider
.when("/", {
    templateUrl : "index.html"
})

您应该使用另一个单独的模板作为主模板，而不是index.html

ng-view导致页面崩溃

2 个答案: