将基于回调的API与AngularJS

Question

我正在尝试添加＆＃39; loading＆＃39;在异步调用完成之前将类放到元素上。为此，我使用了一个名为 loading 的变量，我这样使用：

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

要触发通话，我正在使用 ng-click ：

的其他元素

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

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

$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');
        });
    })
}

项目是我的自定义类 ProjectManager 的一个实例。这是 deleteGlobal ：

的方法

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

（这里，setTimeout仅用于模拟长操作，因为我计划稍后替换此代码）

因此，使用此代码，一旦调用回调，我希望 $ scope.loading 变为false。有几个 console.log ，我看到的确如此。但是，“加载”＃39;我的元素的类没有相应删除。

我读了$ scope。$ apply（）并尝试将异步调用包装在其中，但它没有用。事实上，它甚至引发了一个错误：＆＃39; $已经在申请中。＆＃39;。

提前致谢！

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创建的Promise与AngularJS框架及其摘要周期集成在一起。在AngularJS执行上下文中应用的操作将自动受益于AngularJS数据绑定，异常处理，属性监视等。

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

1 个答案:

将基于回调的API与AngularJS