在回调中更改条件后，NGCLASS未更新

Question

我试图将'加载'类添加到元素中，直到异步调用完成为止。为此，我正在使用一个名为加载的变量，我像这样使用：

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

要触发呼叫，我正在使用 ng-click 的另一个元素：

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

这将在我的控制器的 $ scope 中调用方法 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 是我的自定义类 ProjectManager 的实例。这是其方法 DELETEGLOBAL ：

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

（在这里，Settimeout仅用于模拟漫长的操作

因此，使用此代码，我希望 $ scope.loading 在调用回调后会变成false。我看到了几个 console.log s。但是，我的元素的"加载"类未被相应删除。

我阅读了大约$scope。$ apply（），并试图将我的异步调用包装在其中，但它没有用。实际上，它甚至触发了一个错误：'$已应用已在进行中"。

预先感谢！

Answer 1

将基于回调的API与AngularJS

集成

一般而言，与AngularJs一起，通过将其转换为$ Q承诺，将基于第三方回调的API与框架集成在一起：

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;
}

然后使用返回承诺的.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服务创建的承诺与AngularJS框架及其消化周期集成在一起。在AngularJS执行上下文中应用的操作将自动受益于AngularJS数据结合，异常处理，属性观看等。