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

ngClass not updating after condition is changed in a callback

我正在尝试向元素添加 '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”。

提前致谢!

将基于回调的 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 数据绑定、异常处理、属性 监视等