小编pet*_*pod的帖子

AngularJS Scope在异步调用后不在视图中更新

在向API发出请求时,我无法在前端更新我的示波器.在后端我可以看到我的$ scope变量的值正在改变,但这并没有在视图中反映出来.

这是我的控制器.

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);
      });
    });  
 }
});
Run Code Online (Sandbox Code Playgroud)

这是我的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>
Run Code Online (Sandbox Code Playgroud)

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

错误:$ digest已在进行中 …

scope asynchronous angularjs

14
推荐指数
2
解决办法
1万
查看次数

标签 统计

angularjs ×1

asynchronous ×1

scope ×1