3

I am writing a angular component in recursive way to display a json as tree. It works, but Aborts showing "Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations"

Component Template:

jsonTree.html:(recursive)

<span>{{$ctrl.key}}</span>
<span ng-if="!$ctrl.isExpandable">{{$ctrl.value}}</span>
<ul ng-if="$ctrl.isExpandable">
  <li ng-repeat="(subkey,subval) in $ctrl.value">
    <json-tree key="subkey" value="subval"></json-tree>
  </li>
</ul>

Component JS: 

myModule.component ('jsonTree',
    bindings: {key:"<",value:"<"}
    templateUrl: "jsonTree.html");
R. Richards
  • 24,603
  • 10
  • 64
  • 64
Dinesh Namburi
  • 301
  • 3
  • 14
  • You might want to check https://stackoverflow.com/questions/14430655/recursion-in-angular-directives – Quad Aug 06 '17 at 23:55
  • Basically the reason you are getting infdigestloop error is that template compiler sees the directive inside your template and goes "oh let me compile that template too" and then tries to compile that template again and goes "oooh another directive let me compile it's template too" over and over again. – Quad Aug 06 '17 at 23:57
  • Thanks... Now I understand the problem...So, do you say to use directives instead of components for these kind of recursive use cases??? – Dinesh Namburi Aug 07 '17 at 04:49
  • 1
    See [AngularJS Error Reference - Error: $rootScope:infdig Infinite $digest Loop](https://docs.angularjs.org/error/$rootScope/infdig) – georgeawg Aug 07 '17 at 10:49

0 Answers0