Running into infinite digest cycle while binding to function that has $http inside

Question

I need to generate http link for a tag. For that reason I put in html line

<a href="{{getLink(url)}}">My link</a>

in controller it defined as:

$scope.getLink = function(inputUrl){

    $http.get(inputUrl).success(function(data){/*.....*/});

}

Why AngularJS ends up in infinite cycle? What is the right design?

This question already has an answer as it pertains to the infinite digest. You definitely cannot use a function inside an expression which will call `$http`. To save confusion for people searching for this error in the future, it's best if you try to come up with another way to solve your specific problem, and if you still encounter errors, post a new question. Trying to update the question to get different answers only creates confusion. — Claies, Feb 04 '15 at 08:44

score 3 · Accepted Answer · answered Feb 04 '15 at 02:51

As explained in another answer, watched expressions are evaluated on every digest and the resulting value is compared to their previous value - dirty checking. If there is a change, another iteration of the digest starts because a change in one value might cause a change in another.

If there is a circular dependency (including, the circle of one, i.e. the same expression is different every time), it results in an infinite loop that Angular stops after 10 iterations.

Specifically, your getLink function's return value is a promise (the return value of $http), and Angular bindings do not "wait" on a promise.

What you want to do is to kick start the $http call and in its handler assign the return value to a ViewModel property that would be bound to <a>:

function getLink(){
  $http.get(inputUrl)
      .success(function(data){
         $scope.url = data.data;
      });
}

You can call getLink, for example, when your controller runs.

In the View you just bind url to ng-href (not href) attribute:

<a ng-href="url">My Link</a>

Rebornix · Answer 2 · 2015-02-05T13:47:13.300

Once you add an Angular expression in View like {{expression}}, it would be added to watch list of current scope.

Angular uses a mechanism called dirty checking to archive two way binding. Each time some specific events happen, Angular will go through the watch list to check whether the watched value has changed or not, this action is called as digest loop.

Here some specific events consist of user input, model change, $http requests finish, etc. As you are using a function getLink in the expression, each time when Angular trigger a dirty check/digest loop, this function will be executed once again to check whether its return result has changed.

The problem is, the function getLink here is a $http request, after it's executed, Angular will triggered another round dirty check ,which will execute this function again ... Bang, it's an infinite loop.

Conclusion: do not add any $http call in angular expression.

Running into infinite digest cycle while binding to function that has $http inside

2 Answers2

Linked