CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-include
tq0fqeu
tq0fqeu

Reputation: 911

Why ng-include causing $digest iterations reached?

Receiving data by

$scope.$watch("build.idx", ->
  $http.get("/build/" + $scope.build.idx + ".json").success((data) ->
    $scope.build = data
  )
)

ng-include inside ng-repeat

.build-stage
  .row{ "ng-repeat" => "stage in build.stages" }
    %div{ "ng-include" => "donoting.html" } # donoting.html is blank

first loading page, it's OK. and when changing build.idx, it cause

10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function (){var a=d.url(),b=h.$$replace;p&&a==h.absUrl()||(p++,c.$evalAsync(function(){c.$broadcast(\"$locationChangeStart\",h.absUrl(),a).defaultPrevented?h.$$parse(a):(d.url(h.absUrl(),b),g(a))}));h.$$replace=!1;return p}; newVal: 8; oldVal: 7"],["fn: function (){var a=d.url(),b=h.$$replace;p&&a==h.absUrl()||(p++,c.$evalAsync(function(){c.$broadcast(\"$locationChangeStart\",h.absUrl(),a).defaultPrevented?h.$$parse(a):(d.url(h.absUrl(),b),g(a))}));h.$$replace=!1;return p}; newVal: 9; oldVal: 8"],["fn: function (){var a=d.url(),b=h.$$replace;p&&a==h.absUrl()||(p++,c.$evalAsync(function(){c.$broadcast(\"$locationChangeStart\",h.absUrl(),a).defaultPrevented?h.$$parse(a):(d.url(h.absUrl(),b),g(a))}));h.$$replace=!1;return p}; newVal: 10; oldVal: 9"],["fn: function (){var a=d.url(),b=h.$$replace;p&&a==h.absUrl()||(p++,c.$evalAsync(function(){c.$broadcast(\"$locationChangeStart\",h.absUrl(),a).defaultPrevented?h.$$parse(a):(d.url(h.absUrl(),b),g(a))}));h.$$replace=!1;return p}; newVal: 11; oldVal: 10"],["fn: function (){var a=d.url(),b=h.$$replace;p&&a==h.absUrl()||(p++,c.$evalAsync(function(){c.$broadcast(\"$locationChangeStart\",h.absUrl(),a).defaultPrevented?h.$$parse(a):(d.url(h.absUrl(),b),g(a))}));h.$$replace=!1;return p}; newVal: 12; oldVal: 11"]]

and when removing ng-include line, it's OK. I think it's ng-include causes $locationChangeStart fired, but why?

Upvotes: 2

Views: 1421

Answers (2)

klode
klode

Reputation: 11071

Be sure that the path of the template to include in ng-include is correct. If not it causes the 10 $digest() iterations reached error.

If the path is not correct the server will serve the index.html (at least in the case you use html5 mode the server defaults to serve index.html); the index.html will be included and will cause the ng-include directive to run again; the result is an an infinite loop of iteratively included index.html which is terminated with the error message 10 $digest() iterations reached

Upvotes: 2

Dayan Moreno Leon
Dayan Moreno Leon

Reputation: 5435

you got your self in a infinite loop right here

$scope.$watch("build.idx", ->
  $http.get("/build/" + $scope.build.idx + ".json").success((data) ->
    $scope.build = data
  )
)

you are watching for build.idx, and if that changes requesting information that will change build which will trigger the request again and again modify the build variable andf go on and on and this will quicly reflect in the digest cycle by constantly changing and angular will throw this exception, because it detected a possible infinite loop

Upvotes: 0

Related Questions