Infinite loop in angularjs ng-if

Question

Using the https://github.com/ironboy/mongresto framework, I have an angularjs directive with html and js. The problem is the Assignment.get is looping 2000+ times which makes me think something is wrong with my implementation of ng-if as this calls the scope.hasAssignment. Or maybe im looking in the wrong place

assignments.html

<!--Assignments-->
   <li ng-if = "hasAssignment(course.assignments)"><a  ng-click="isChildOpen = !isChildOpen">Assignments <i ng-hide="isChildOpen" class="fa--toggle fa fa-chevron-right"></i><i ng-show="isChildOpen" class="fa--toggle fa fa-chevron-down"></i></a>
   <ul ng-show="isChildOpen" ng-repeat="assignment in assignmentlist">
       <li><a href="courses/{{course.name}}/assignment/{{ assignment._id }}"><i class="fa--itemtype fa fa-file-text-o"></i>{{assignment.name}}</a></li>
   </ul>

assignments.js

scope.hasAssignment = function(assignmentArray) 
     {
         if(typeof assignmentArray !== 'undefined' && assignmentArray.length > 0)
          {                
              Assignment.get({course: scope.course._id}, function(res){
                 scope.assignmentlist = res;
              });
              return true;
          }
          else
          {
              return false;
          }
     }

I used a console log on the assignmentArray passed into the function and it returns an array of 3 assignments. The functionality works in the end, and the list gets filled with results from the db its just it keeps running forever.

You are having hasAssignment inside ng-if` which is getting call on each digest cycle, from that function you are again calling Assignment.get which again run an digest cycle once it get completed.. so this is scenario is happening infinite amount of time & that is causing an error — Pankaj Parkar
– Pankaj Parkar, Commented Apr 7, 2016 at 10:15

iulian · Accepted Answer · 2016-04-07 11:55:34Z

When you set it in your ngIf directive, it gets evaluated on each $digest cycle, which gets called in many situations, including model changes. So, whenever you make an AJAX call (which is async), the update of scope.assignmentlist = res; triggers another $digest cycle that in turn makes another call and so on... But even on first load, the $digest cycle will run several times, each of which will make a call, triggering the infinite loop of requests... For a deeper understanding of the $digest cycle, read this article.

So, in order to get rid of this infinite loop, you can check against the .length condition in your ngIf:

<li ng-if = "course.assignments && course.assignments.length"><a  ng-click="isChildOpen = !isChildOpen">Assignments <i ng-hide="isChildOpen" class="fa--toggle fa fa-chevron-right"></i><i ng-show="isChildOpen" class="fa--toggle fa fa-chevron-down"></i></a>

First, you check whether the course assignments is defined and then if it has a length. And in your controller make the Assignment.get call in some other place (this depends on your program logic. In most cases, you can do this on controller initialization).

Collectives™ on Stack Overflow

Infinite loop in angularjs ng-if

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related