javascript - 如何在 Angular 中更新 View (避免 $apply 已经在进行中)？

Question

我想在我的应用程序中执行某些逻辑时显示按钮(Some Button)，然后隐藏此按钮。

通过单击我调用 expand() 的某些按钮，其中将 data.loading 设置为 true，此时我想显示按钮，当我将 data.loading 设置为 false 时，我想隐藏按钮，但 View 不会更新。

<button ng-show="data.loading">Some Button</button>
<button ng-click="expand(data)">Other Button</button>

功能:

$scope.expand = function (data) {
    data.loading = true;
    // Some Button must be visible now
    // Some logic here;
    data.loading = false;
    // Some Button must be invisible now
}

$scope.$apply() - 返回错误:$apply 已经在进行中

$scope.safeApply() - 不抛出异常，但不更新 View 。

$timeout - 不更新 View 。

Answer 1

通过 $scope 属性引用您的数据模型以及将您的主要逻辑移出当前摘要周期(使用 $timeout or $evalAsync )应该可以修复您的案例中的“$apply already in progress”消息:

$scope.expand = function () {
   $scope.data.loading = true;
   $timeout(function () {
       // Some logic here;
       $scope.data.loading = false;
   });
};

我通常更喜欢 (1) 在服务中保存加载进度，以及 (2) 使用 promise 来管理进度状态。在下面的示例中，logicFunction() 返回一个 promise。

$scope.expand = function () {
    progressStatusService.started("Loading something…")
    logicFunction().finally(function () {
        progressStatusService.finished("Loading something…")
    });
};
// progressStatusService implementation left as a challenge to the reader

全局进度服务主要用于应用程序范围的加载指示——如果加载状态只影响一个特定的小部件，那么它可能是一种开销。

但是，延迟/ promise 方法可能通常有用且更易于阅读(请参阅 $q 中的更多文档)。