在绑定到内部带有$ http的函数时运行到无限的摘要周期

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?

Answer 1

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, ie 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>

Answer 2

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.