javascript - ng-view 导致页面崩溃

标签 javascript html angularjs angular-routing

尝试复制一个简单的路由示例 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

最佳答案

是的,index是其他 View 的容器。您应该放置部分 View 而不是索引。问题出在这里:

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

该模板 url 将在 ng-view 中加载完整的 index.html,这将加载另一个带有新 ng-view 的 index.html 到无限和 Secula Seculorum。

简单的解决方法:创建一个新 View (就像您拥有的其他路由一样)并将其放入 templateUrl

关于javascript - ng-view 导致页面崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46029120/

相关文章:

JavaScript,数组作为参数

html - 扩展 sidenav 时 CSS Hamburger 不旋转

angularjs - Angular - Pikaday : change date in pickaday element

angularjs - 动态添加元素的指令不起作用

javascript - 添加/删除类时 jQuery 单击函数表现得很奇怪

javascript - GitHub 速率限制防止返回用户提交历史记录

css - 背景不适用于 div,因为它应该

Javascript按顺序调用函数

JavaScript 无法用 URL 替换字符串

html - 单击 Chrome 和 Safari 中的输入字段后出现奇怪的行为