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
– Paul Oliver, Commented May 28, 2014 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
– Paul Oliver, Commented May 28, 2014 at 12:26

Community · Accepted Answer · 2017-05-23 12:07:12Z

5

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

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered May 28, 2014 at 13:20

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aakash Over a year ago

Do you mean that directive doesn't trigger the digest cycle?

Collectives™ on Stack Overflow

Angular.js Infinite Loop of calling functions

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related