更新

Question

我有这段代码，在其中，我将变量“ showLoading”设置为true，以向用户显示页面正在加载。有时加载需要很长时间才能完成。完成加载后，如何将变量再次设置为false？自从我在几周前就开始编码javascript + angular以来，请给我一种简单的方法。

表格内的HTML：

<th scope="col" data-toggle="tooltip" title="Organize por data!" 
    class="table-pointer" ng-click='sortColumn("DATA_VENDA")'
    ng-class='sortClass("DATA_VENDA")'>
  Data
</th>

脚本：

// column to sort
$scope.column = 'Data';
// sort ordering (Ascending or Descending). Set true for descending
$scope.reverse = false; 
// called on header click
$scope.sortColumn = function(col){
    $scope.showLoading = false;
    $scope.column = col;
    if($scope.reverse){
        $scope.reverse = false;
        $scope.reverseclass = 'arrow-up';
    }else{
        $scope.reverse = true;
        $scope.reverseclass = 'arrow-down';
    }
};
// remove and change class
$scope.sortClass = function(col){
    if($scope.column == col){
        if($scope.reverse){
            return 'arrow-down'; 
        }else{
            return 'arrow-up';
        }
    }else{
        return '';
    }
}

更新

在代码的另一部分中，我这样做了，但是我不知道如何在示例中申请该功能。

$scope.enjuListBackPecafunction = function() {
    $scope.mostrarLoading = true;
    return $scope.enjuListBackPeca = Peca.query({
        dateFromPeca:'20170101',
        dateToPeca:'20180830'
        // dateToPeca: $scope.endDate
    }, function (err, values) {
        $scope.mostrarLoading = false;
        if (err) return err;
        return values
    });
};

Answer 1

也许您希望有一个Promise来控制“有时需要很长时间才能完成”的过程。让我们想象一下有一种实现异步排序的方法：

var doSortAsync = function(column, order) {
  return new Promise(function(resolve) {
    // ... sending a sort request with column-order params
    // ... getting the result asynchronously
    // ... and calling the resolve method when it is done
    resolve(result);
  })
}

然后，您只需在带有适当参数的控制器方法中调用它即可：

$scope.sortColumn = function(col) {
  $scope.showLoading = true;
  $scope.column = col;
  if($scope.reverse) {
    $scope.reverse = false;
    $scope.reverseclass = 'arrow-up';
  } else {
    $scope.reverse = true;
    $scope.reverseclass = 'arrow-down';
  }
  doSortAsync(col, $scope.reverse).then(function(result) {
    $scope.showLoading = false;
  });
};

您需要知道该过程完成的确切时间，在这里使用Promise是一种常见方法。如果您无法使用ES6 Promises，则可以尝试AngularJS $q service。

Answer 2

使用promise的.finally方法停止微调器：

$scope.showLoading = true;

$http.get(url)
  .then(function(response) {
    $scope.data = response.data;
}).catch(function(response) {
    console.log(response.status);
    throw response;
}).finally(function() {
    $scope.showLoading = false;
});

在服务器响应数据或错误后，.finally块将始终执行。

Answer 3

我想问Peca.query是第三方基于回调的API。要将其与AngularJS框架集成，请使用$q.defer：

function ajsPecaQuery(options) {
    var deferred = $q.defer();
    var resource = Peca.query(options, function (err, values) {
        if (err) return deferred.reject(err);
        //else
        return resolve(values);
    });
    resource.$promise = deferred.promise;
    return resource;
}

该函数调用Peca.query操作并从回调中创建AngularJS承诺。它将诺言附加到属性名称为$promise的资源对象上。

然后按如下方式使用它：

$scope.enjuListBackPecafunction = function() {
    $scope.mostrarLoading = true;
    var resource = ajsPecaQuery({
        dateFromPeca:'20170101',
        dateToPeca:'20180830'
        // dateToPeca: $scope.endDate
    });
    resource.$promise.finally(function() {
        $scope.mostrarLoading = false;
    });

    return $scope.enjuListBackPeca = resource;
};

该函数在操作开始时启动微调器。它使用promise的.finally方法来停止微调器。

别忘了注入$q服务。

执行函数后将变量设置为false

更新

3 个答案: