在回调中更改条件后 ngClass 不更新

Question

我正在尝试向元素添加 'loading' class 直到异步调用完成。为此，我使用了一个名为 loading 的变量，我这样使用：

<div class='ui segment' ng-class="{'loading': loading == true}">

为了触发调用，我使用了另一个带有 ng-click 的元素：

<i class='...' ng-click="action('deleteGlobal', false)"></i>

这将在我的控制器的 $scope 中调用变量 project 的方法 deleteGlobal ，并提供回调：

$scope.action = (action, redirect) => {
    delete $scope.error;
    $scope.loading = true;
    $timeout(() => {
        $scope.project[action]((err) => {
            $scope.loading = false;
            if (err)
                $scope.error = err;
            else if (redirect)
                $state.go('projects.all');
        });
    })
}

project 是我的自定义 class ProjectManager 的实例。这是它的方法 deleteGlobal :

deleteGlobal (callback) {
    window.setTimeout(() => {
        callback();
    }, 1000)
}

（这里，setTimeout只是用来模拟一个长时间的操作，因为这是我打算稍后替换这段代码的）

所以对于这段代码，我希望 $scope.loading 在回调被调用后变为 false。通过几个 console.logs，我发现情况确实如此。然而，我的元素的 'loading' class 并没有被相应地删除。

我阅读了有关 $scope.$apply() 的信息，并尝试将我的异步调用包装在其中，但没有成功。事实上，它甚至触发了一个错误：“$apply already in progress”。

提前致谢！

Answer 1

将基于回调的 API 与 AngularJS

集成

一般来说 AngularJS，第三方基于回调的 API 通过将它们转换为 $q promises 与框架集成：

function apiPromise(callbackBasedApi) {
    var defer = $q.defer()
    callbackBasedApi( (value,err) => {
         ̶c̶a̶l̶l̶b̶a̶c̶k̶(̶)̶;̶  
         if (value) {
            defer.resolve(value);
         } else {
            defer.reject(err)
         }; 
    })
    return defer.promise;
}

然后使用返回的promise的.then方法：

$scope.action = (action, redirect) => {
    delete $scope.error;
    $scope.loading = true;
    var promise = apiPromise($scope.project[action])
      .then(function(value) {
        if (redirect)
           $state.go('projects.all');
        };
    })
      .catch(function(err) {
        $scope.error = err;
    })
      .finally(function() {
        $scope.loading = false;
    });
}

使用 $q service 创建的承诺与 AngularJS 框架及其摘要循环集成。在 AngularJS 执行上下文中应用的操作将自动受益于 AngularJS 数据绑定、异常处理、属性监视等

在回调中更改条件后 ngClass 不更新

ngClass not updating after condition is changed in a callback

angularjs

callback

ng-class

将基于回调的 API 与 AngularJS