【问题标题】：ng-include recursively including whole index.html, and giving error "10 $digest() iterations reached"ng-include 递归地包括整个 index.html，并给出错误“达到 10 $digest() 迭代”
【发布时间】：2013-12-24 13:01:03
【问题描述】：

我在使用 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>

【问题讨论】：

对服务器的相关请求是什么。查看浏览器开发者控制台的网络标签
没有太多：GET /test.html 304 5ms（以及中包含的 .css 和 .js 脚本）
问题是 GET/test.html 响应 index.html
感谢@Chandermani，您让我走上了正确的道路，我设法解决了它。我必须修复 test.html

的路径
@klode 请回答问题，以便您可以关闭它。

标签： javascript angularjs angularjs-ng-include

【解决方案1】：

错误的根源是要包含的 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>

解决问题。

【讨论】：