0

Within a ng-repeat list i call a function {{ getDetailedData(id) }} to enrich the repeat items with more data. Within this function I call perform a-synchronous $http call in order to get more data. This results in recursive behaviour: the a-sync function gets called infinte.

when I remove the a-sync call the function gets called only as mauch as there are items in the list is the source for the repeat.

The a-sync call has a decent callback and surely doesn't call the originating function.

Need your thoughts on this.

EDIT

function in controller:

    $scope.getExtraData = function (id) {

                sFact.getSpotDetail(id, function (data) {
                    console.log('getSpotDetail', data);
                })
            return false;
}

ng-repeat in partial:

<div class="col-lg-4" style="display: block;" data-ng-repeat="cust in spots | filter: query">
            <h2 title="{{ cust.title }}">{{ $index + 1 }} {{ cust.title }}</h2>
            {{ getExtraData(cust.id) }}
</div>

a-sync function sFact(ory)

factory.getSpotDetail = function(id, callback) {

    var data = 'id=' + id;
    $http({
        url: "php/get_venue.php",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        data: data,
        method: "POST"
    }).success(callback);
}
San Jay Falcon
  • 993
  • 1
  • 9
  • 20
  • Do you append the new data to the item? I think angular refreshes the item in he ng-repeat, and therefore call again the function whenever the item is modified. – jpmorin Oct 11 '13 at 15:05
  • Can you show me your ng-repeat html and the javascript of the controller with the getDetailedData function. – jpmorin Oct 11 '13 at 15:07
  • Well actually I'm only logging the a-sync data which is returned, so I am doing with it. Stripped everything to the most basic setup: itemFactory.getSpotDetail(id, function (data) { console.log('getSpotDetail::', data); }) – San Jay Falcon Oct 11 '13 at 15:08
  • Is `id` a property of the item in the ng-repeat? Like: `
    • {{getDetailedData(item.id)}}
    `     – jpmorin Oct 11 '13 at 15:12
  • Ok just saw the updated post. – jpmorin Oct 11 '13 at 15:13
  • @jpmorin - as request the code. – San Jay Falcon Oct 11 '13 at 15:14
  • I think that you should not do an ajax request inside of your ng-repeat because angular will refresh it whenever it feels like without your control. You should either get all your data before displaying it or have it loaded on a click event. I tried your code with a `$timeout` instead and it did what you experience. – jpmorin Oct 11 '13 at 15:21
  • Look a this JSBIN: http://jsbin.com/aQIYiMi/2/edit?html,js,output Open your dev console and look at what angular is doing. I cached the result of the async request. – jpmorin Oct 11 '13 at 15:29
  • I edited the demo (http://jsbin.com/aQIYiMi/3/edit) I added a query filter so you can see the ng-repeat gets refreshed whenever the query changes, so your async call would be retriggered everytime. – jpmorin Oct 11 '13 at 15:37
  • possible duplicate of [Infinite loop with Angular expression binding](http://stackoverflow.com/questions/17466872/infinite-loop-with-angular-expression-binding) – Stewie Oct 11 '13 at 15:56
  • Here is the answer: http://stackoverflow.com/questions/17466872/infinite-loop-with-angular-expression-binding – San Jay Falcon Oct 13 '13 at 11:03

0 Answers0