ng-include递归地包括整个index.html,并给出错误"10 $ digest()迭代达到"

Question

ng-include递归地包括整个index.html,并给出错误"10 $ digest()迭代达到"

klo*_*ode 5 javascript angularjs angularjs-ng-include

我对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>

Run Code Online (Sandbox Code Playgroud)

的test.html

<h3> included template </h3>

Run Code Online (Sandbox Code Playgroud)

在浏览器中我得到:

测试

....

测试

检查浏览器中的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

klo*_*ode 2

错误的根源是要包含的html模板路径错误。如果模板路径不正确并且不匹配任何服务器路由，则服务器默认为整个index.html. 这会启动无限循环，因为在加载index.html模板include时，会使用错误的路径再次请求模板，并一次又一次地提供和包含 index.html .. 导致“达到 10 $digest() 迭代”错误

test.html就我而言，从服务器请求的正确路径是static/src/views/test.html。

从此更改包含

<div ng-include="'test.html'"> </div>

Run Code Online (Sandbox Code Playgroud)

对此

<div ng-include="'static/src/views/test.html'"> </div>

Run Code Online (Sandbox Code Playgroud)

解决了问题。

归档时间：	12 年前
查看次数：	1533 次
最近记录：	10 年，4 月前