异步调用后，AngularJS 范围未在 View 中更新

Question

我在向 API 发出请求时无法更新前端的作用域。在后端，我可以看到 $scope 变量的值正在变化，但这没有反射(reflect)在 View 中。

这是我的 Controller 。

Controllers.controller('searchCtrl', 
 function($scope, $http, $timeout) {
   $scope.$watch('search', function() {
      fetch();
   });

 $scope.search = "Sherlock Holmes";

 function fetch(){
   var query = "http://api.com/v2/search?q=" + $scope.search + "&key=[API KEY]&format=json";
    $timeout(function(){
      $http.get(query)
      .then(function(response){ 
        $scope.beers = response.data; 
        console.log($scope.beers);
      });
    });  
 }
});

这是我的 html 片段

<div ng-if="!beers">
  Loading results...
</div>
<p>Beers: {{beers}}</p>
<div ng-if="beers.status==='success'">

  <div class='row'>
    <div class='col-xs-8 .col-lg-8' ng-repeat="beer in beers.data track by $index" ng-if="beer.style">
    <h2>{{beer.name}}</h2>          
    <p>{{beer.style.description}}</p>
    <hr>
    </div>
  </div>
</div>

<div ng-if="beers.status==='failure'">
  <p>No results found.</p>
</div>

我尝试了多种解决方案，包括使用 $scope.$apply(); 但这只会产生常见错误

Error: $digest already in progress

以下帖子建议使用$timeout或$asyncDefault AngularJS : Prevent error $digest already in progress when calling $scope.$apply()

我上面的代码使用 $timeout 并且我没有错误，但 View 仍然没有更新。

感谢帮助

Answer 1

如果您使用的是 AngularJS 1.3+，您可以在 $scope.beers = response.data; 语句之后尝试 $scope.$applyAsync() 。

这就是 Angular 文档中关于 $applyAsync() 的内容

Schedule the invocation of $apply to occur at a later time. The actual time difference varies across browsers, but is typically around ~10 milliseconds. Source

更新

正如其他人指出的那样，您(通常)不需要手动触发摘要周期。大多数时候，它只是表明您的应用程序设计不好(或者至少不是 AngularJS 友好的设计)。

当前在 OP 中，fetch 方法在 $watch 上触发。相反，如果该方法由 ngChange 触发，则应自动触发摘要周期。

以下是此类代码的示例:

HTML

// please note the "controller as" syntax would be preferred, but that is out of the scope of this question/answer
<input ng-model="search" ng-change="fetchBeers()">

JavaScript

function SearchController($scope, $http) {

    $scope.search = "Sherlock Holmes";

    $scope.fetchBeers = function () {
        const query = `http://api.com/v2/search?q=${$scope.search}&key=[API KEY]&format=json`;
        $http.get(query).then(response => $scope.beers = response.data);
    };

}