Question

在Angular中完成API调用后，我无法确定如何在我的页面中添加条目。

这是我的HTML：

<body ng-controller="apiCtrl">
  <div class="random-articles">
    <input type="text" ng-model="searchTerm">
    <button class="btn">Search</button>
    <button id="click" ng-click="fireAPICalls()">Click me!</button>
    <div ng-repeat="article in wikiArticles">{{article.title}}</div>
  </div>
</body>

我的JS：

function apiCtrl($scope) {
  $scope.wikiArticles = [];
  $scope.wikiAPI = (function(){
    return {
      getRandomArticle : function() {
        return $.getJSON("http://en.wikipedia.org/w/api.php?action=query&generator=random&grnnamespace=0&prop=extracts&exintro=&format=json&callback=?", function (data) {});
      }
    }
  })();
  $scope.fireAPICalls = function() {
    $scope.wikiAPI.getRandomArticle().done(function(data) {
      var article;
      for(var id in data.query.pages) {
        article = data.query.pages[id];
        $scope.wikiArticles.push(article);
      }
      console.log(article);
      setTimeout($scope.fireAPICalls, 500);
    });
  }
}

现在article.title只有在“点击我！”时才会更新。单击按钮。相反，我希望标题在服务器的每个响应之后出现。

我该怎么做？

Answer 1

在角度应用中使用setTimeout是有问题的。然后，从setTimeout调用的函数不会触发摘要周期。为防止这种情况，请使用角度timeout service。

API返回数据后立即动态更新页面

1 个答案: