javascript - Angularjs 迭代内更新范围

Question

在下面的代码中，我试图获取每个问题的子问题列表并在 View 中显示它们，但我在更新每个问题的子问题时遇到问题，它不会更新，所以我得到所有问题的相同子问题列表。

如何显示每个问题并列出其下的所有子问题？

  function loadAllQuestionGroup () {
    Questiongroup.query({}).$promise.then(function(group){
        vm.questiongroups = group;
        for(var i=0;i<group.length;i++){
           var grouptitle=group[i].title
            Question.questionsByQuestionGroup({id:group[i].id}).$promise.then(function(question){
                vm.question = question; 
               for(var j=0;j<question.length;j++){    
                  Subquestion.subquestionsByQuestion({id:question[j].id}).$promise.then(function(subquestion){
                      vm.subquestions=subquestion;
                    });                        
              }
         });
        }
      });
    }

 <div ng-repeat="question in vm.question">
   {{question.name}}
   <div ng-repeat="subquestion in vm.subquestions">
     {{subquestion.name}}
   </div>
 </div>

Answer 1

看起来这不是与 Angular 范围相关的问题，而是您遇到问题的纯 JavaScript 范围。如果您在循环中进行异步调用，您每次都会收到最后一个元素。要修复它，您应该使用匿名函数将 Promise 包装在循环内。

查看这个经典示例(您可以认为 setTimeout 函数相当于您的 Question.questionsByQuestionGroup({id:group[i].id}).$promise，它们都是异步函数)

//THIS IS EQUIVALENT TO YOUR CASE
//In this case it will return each time last element, 5 in this case
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  });
}
//Result: 5 5 5 5 5

//THIS IS HOW YOU SHOULD REFACTOR
//Make a wrapper for async, and it will work as needed
for (var j = 0; j < 5; j++) {
  (function(index) {
    setTimeout(function() {
      console.log(index)
    });
  })(j);
}
//Result: 0 1 2 3 4

附注在使用包装器修复它之后，您的代码将更加难以阅读，最好将其重构为单独的函数。