Angular.js Infinite Loop of calling functions

Question

My problem is in the following template :

<div class="container">
<h1>Process Definitions</h1>
 <table class="table table-stripped" >
    <tr>
      <td><strong>Name</strong></td>
    <td><strong>Id</strong></td>
    <td><strong>Version</strong></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr ng-repeat="def in defs | filter: global.search">
    <td>{{def.name}}</td>
    <td>{{def.id}}</td>
    <td>{{def.version}}</td>
    <td><button type="button" class="btn btn-warning" ng-click="redirectToInstance(def.id)">Instances</td>
    <!--<td><h4><small>{{'Current :' + getCount(def.id) }}</small></h4></td>-->
    <td><button type="button" class="btn btn-warning" ng-click="redirectToTasks(def.id)">Tasks</td>
  </tr> 
</table>
</div>

The problem is the function call inside the expression inside the comment-tag.

the function called is in this controller :

BPMNControllers.controller('ProcessDefinitionCtrl', ['$scope','$location',  'ProcessDefinitions','ProcessInstances',
 function($scope,$location, ProcessDefinitions,ProcessInstances) {
$scope.defs = ProcessDefinitions.query();
$scope.redirectToInstance = function(id){$location.path('/process-definitions/' + id);};
$scope.redirectToTasks = function(id){$location.path('/tasks/def'+id)};
$scope.getCount = function (id){
    var countObj = ProcessInstances.getCount({processDefinitionId : id});
    return countObj.count;
    };
console.log('ProcessDefinitionCtrl');
  }]);

And the following service is important, cause it's querying a rest-api.

BPMNServices.factory('ProcessInstances', ['$resource','restUrl',
function($resource,restUrl){
var url = restUrl+'engine-rest/process-instance/:id'
return $resource(url,{id:'@id'},{
  query :       {method:'GET',isArray:true},
  get :         {method:'GET'},
  getCount :    {method:'GET',url:restUrl+'engine-rest/process-instance/count'}
},{})

}]);

This results in an infinite loop of ajax calls.I think i know that the problem is the asynchronous call, and since it's not directly bound the call is not fast enough and thus called and called again. How can i do this?

And the ProcessDefinitions as requested:

BPMNServices.factory('ProcessDefinitions', ['$resource','restUrl',
function($resource,restUrl){
var url = restUrl + 'engine-rest/process-definition/:id'
return $resource(url, {id : '@id'}, {
  query:    {method:'GET', isArray:true},
  get :     {method:'GET'},
  start:    {method:'POST',url:url+'/start'}
},{});
}]);

And the model for the global search filter :

                  <input type="text" class="form-control" placeholder="Search" ng-model="global.search">

What are your AJAX calls (the URI) that are repeatedly being called? And can you also show your `ProcessDefinitions`? — Paul Oliver, May 28 '14 at 12:06
Your repeater is using a filter (`def in defs | filter: global.search`)...could you show what it is? Look for `$scope.global.search` in your code. — Paul Oliver, May 28 '14 at 12:26
possible duplicate of [Infinite loop with Angular expression binding](http://stackoverflow.com/questions/17466872/infinite-loop-with-angular-expression-binding) — Marc Kline, May 28 '14 at 12:41

score 5 · Accepted Answer · edited May 23 '17 at 12:07

The infinite loop is a result of your watched view expression calling a function which itself results in the triggering of a $digest cycle.

A good explanation, and another example, is provided in Infinite loop with Angular expression binding

As for your particular code, you could use a directive in place of the view expression:

HTML

  <!-- results in infinite digest Count: {{getCount(def.id)}} -->
  Count: <count></count>

JS

.directive('count', function(ProcessInstances){
  return {
    restrict: 'E',
    replace: true,
    link: function(scope) {
      scope.countRes = ProcessInstances.getCount(scope.def.id);
    },
    template: '<span>{{countRes.count}}</span>'
  }
});

Demo

Do you mean that directive doesn't trigger the digest cycle? — Aakash, Aug 04 '14 at 06:12

Angular.js Infinite Loop of calling functions

1 Answers1