我在使用 ng-include 时遇到以下问题。我错过了什么?有人遇到过类似的问题吗?
- 模板
test.html
从未包括在内。 -
<h1>Testing</h1>
重复了很多很多次。 - 我得到以下信息
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
- 检查浏览器中的 html 元素,显示整个 index.html 被 ng-include 递归包含。
我正在做的是使用精简的 index.html 进行的简单测试
index.html
<html>
<head>
<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet">
<link href="static/src/css/app.css" rel="stylesheet">
<script src="static/bower-components/angular/angular.js"></script>
<script src="static/bower-components/angular-route/angular-route.js"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="static/src/js/app.js"></script>
<script src="static/src/js/services.js"></script>
<script src="static/src/js/controllers.js"></script>
<script src="static/src/js/filters.js"></script>
<script src="static/src/js/directives.js"></script>
</head>
<body ng-app="myApp">
<h1> Testing </h1>
<div ng-include="'test.html'"> </div>
</body>
</html>
test.html
<h3> included template </h3>
在浏览器中我得到:
测试
测试
....测试
检查浏览器中的 html,显示递归包含 index.html:
<body ng-app="myApp" class="ng-scope">
<h1> Testing </h1>
<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">
<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" rel="stylesheet" class="ng-scope">
<script src="static/bower-components/angular/angular.js" class="ng-scope"></script>
<script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"></script>
<script src="static/src/js/app.js" class="ng-scope"></script>
<script src="static/src/js/services.js" class="ng-scope"></script>
<script src="static/src/js/controllers.js" class="ng-scope"></script>
<script src="static/src/js/filters.js" class="ng-scope"></script>
<script src="static/src/js/directives.js" class="ng-scope"></script>
<h1 class="ng-scope"> Testing </h1>
<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">
<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" rel="stylesheet" class="ng-scope">
<script src="static/bower-components/angular/angular.js" class="ng-scope"></script>
<script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"></script>
<script src="static/src/js/app.js" class="ng-scope"></script>
<script src="static/src/js/services.js" class="ng-scope"></script>
<script src="static/src/js/controllers.js" class="ng-scope"></script>
<script src="static/src/js/filters.js" class="ng-scope"></script>
<script src="static/src/js/directives.js" class="ng-scope"></script>
<h1 class="ng-scope"> Testing </h1>
<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">
<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" rel="stylesheet" class="ng-scope">
<script src="static/bower-components/angular/angular.js" class="ng-scope"></script>
<script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"></script>
<script src="static/src/js/app.js" class="ng-scope"></script>
<script src="static/src/js/services.js" class="ng-scope"></script>
<script src="static/src/js/controllers.js" class="ng-scope"></script>
<script src="static/src/js/filters.js" class="ng-scope"></script>
<script src="static/src/js/directives.js" class="ng-scope"></script>
<h1 class="ng-scope"> Testing </h1>
<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">
<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
.......
...
</div>
</div>
</body>
最佳答案
错误的来源是要包含的html模板的路径错误。如果模板路径不正确并且与任何服务器路由都不匹配,则服务器默认为整个 index.html
提供服务。这会启动一个无限循环,因为在加载 index.html
时,再次使用错误的路径请求 include
模板,并一次又一次地提供并包含 index.html .. 导致“达到 10 次 $digest() 迭代”错误
在我的例子中,从服务器请求 test.html
的正确路径是 static/src/views/test.html
。
从此更改包含
<div ng-include="'test.html'"> </div>
对此
<div ng-include="'static/src/views/test.html'"> </div>
解决问题。
关于javascript - ng-include 递归包含整个 index.html,并给出错误 "10 $digest() iterations reached",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20436403/