Выполнить метод в одном из дочернего ng-repeat

Question

Я использую angg's ng-repeat для заполнения таблицы данными GitHub api, и я хочу, чтобы один из выполнял метод, который будет возвращать данные. проблема в том, что это делает выполнение функции бесконечно.

HTML:

 <table> 
     <thead> 
      <tr> 
      <th>Name</th> 
      <th>Languages</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="repo in repos"> 
      <td>{{repo.name}}</td> 
      <td></td> <!-- Get languages for each repo here. --> 
      </tr> 
     </tbody> 
     </table> 

Угловой:

(function(){ 

    var app = angular.module("githubViewer", []); 

    var MainController = function($scope, $http){ 

    var onUserComplete = function(response){ 
     $scope.user = response.data; 
     $http.get($scope.user.repos_url) 
      .then(onRepoComplete, onError); 
    }; 

    var onRepoComplete = function(response){ 
     $scope.repos = response.data; 
    }; 

    var onError = function(reson){ 
     $scope.error = "Could not fetch the data"; 
    }; 

    //search for user 
    $scope.search = function(username){ 
     $http.get("https://api.github.com/users/" + username) 
      .then(onUserComplete, onError); 
    }; 

    // These two execute infinately if executed in the ng-repeat's <td> 
    $scope.findLangs = function(langsUrl){ 
     $http.get(langsUrl) 
     .then(onLangComplete, onError); 
    } 

    var onLangComplete = function(response){ 
     return response.data; 
    }; 

    }; 

    app.controller("MainController", ["$scope", "$http", MainController]); 

})(); 

Я попытался с помощью {{findLangs (repo.languages_url)}} в <td>, но это вызывает у меня, чтобы получить эту ошибку:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

И кажется бесконечно исполняемым.

Answer 1

Я не думаю, что вы можете использовать выражение там, потому что вы фактически не возвращаете значение из функции findLangs(). Тем не менее, я не думаю, что это вызовет бесконечный цикл. Я думаю, что вам нужно на самом деле захватить данные языка для каждого репозитория в пределах onRepoComplete обратного вызова, а затем просто использовать эти данные в шаблоне:

var onRepoComplete = function(response){ 
    $scope.repos = response.data; 
    $scope.repos.forEach(function(repo) { 
    $http.get(repo.languages_url) 
     .then(function(response) { 
     // change this to process the language data however you need to... 
     repo.languages = JSON.stringify(response.data); 
     },onError); 
    }); 
}; 

Затем в шаблоне вы можете использовать languages свойство репо:

<tr ng-repeat="repo in repos"> 
    <td>{{repo.name}}</td> 
    <td>{{repo.languages}}</td> 
</tr>