Question

我在异步服务调用完成时显示了一个加载器，并且只是想在完成时隐藏加载器。这是我的控制器：

app.controller('DataController', 
  function($scope, DataService) {
    // UI state
    $scope.loading = true;

    DataService.getData({ "count": 10 }).then(function(data) {
      $scope.data = data;

      // UI state
      $scope.loading = false; // does not update ng-view
      $scope.$apply(function() { // generates error
        $scope.loading = false;
      });
    });
});

观点：

<div ng-controller="DataController">
  <div id="container">
    <div>
      {{ loading }}
    </div>
    <div class="spinner large" ng-show="loading"></div>
    <div class="data-container" ng-show="!loading">
      ...
    </div>
  </div>
</div>

请注意，{{loading}}值在视图中正确更新。使用换行$scope.$apply()调用导致错误：

Error: [$rootScope:inprog]

更新

由于这可能与承诺有关，因此这是getData()工厂生成DataService方法的承诺：

getData: function(params) {
  var deferred = $q.defer();
  APIService.data(params).then(function(data) {
    deferred.resolve(data);
  });
  return deferred.promise;
}

最后一块，APIService.data()方法：

data: function(params) {
  var deferred = $q.defer();
  $resource(endpoint + '/data/feed', {}, {
    'query': { 
      method: 'POST',
      headers: headers
    }
  }).query(params).$promise.then(function(data) {
    deferred.resolve(data);
  });
  return deferred.promise;
}

Answer 1

我会通过将show / hide指令绑定到控制器中的data-property来解决这个问题。如果数据未定义，它将与false相同。

<div class="spinner large" ng-hide="data"></div>
<div class="data-container" ng-show="data">

Answer 2

尝试使用

$scope.$evalAsync(function() {
  $scope.loading = false;
});

Answer 3

发现问题 - 因为这是在Chrome扩展程序中，我需要包含Angular CSS CSP文件，其中包含ng-hide类定义。包含该文件导致代码按预期工作。谢谢大家的帮助。更多信息：

https://docs.angularjs.org/api/ng/directive/ngCsp

从.then（）内更新ng-show

3 个答案: