Angular 事件，UI 被阻止答案

【问题标题】：Angular Events, UI BlockedAngular 事件，UI 被阻止
【发布时间】：2015-12-07 13:48:48
【问题描述】：

我正在为我的 Angular 应用程序制作一般加载动画。

我有一个服务可以打开和关闭加载动画，并且事件正在按照我的预期发生，我的问题是 UI 没有随事件更新。

加载动画的开启和关闭发生在同一个函数调用中，所以我的猜测是在函数调用完成之前ui不会更新，这基本上意味着我的开启和关闭或加载动画没有效果。

我怎样才能写出这样的方式，即 UI 将随着变量的变化而更新。我添加了一个暂停来模拟负载的繁重计算只是为了检查......这是日期时间的东西。

这两个广播是加载状态的开始和停止。

        function activateController(promises, controllerId) {

        var startData = { controllerId: controllerId };
        $broadcast(configcommonProvider.config.controllerActivateStartEvent, startData);
        return $q.all(promises).then(function (eventArgs) {
            var e = new Date().getTime() + (2 * 1000);
            while (new Date().getTime() <= e) { }
            var successData = { controllerId: controllerId };
            $broadcast(configcommonProvider.config.controllerActivateSuccessEvent, successData);

        });
    }

【问题讨论】：

我最终只是手动操作 dom 而不是使用角度表达式进行加载行为。这不是最佳的，但可以完成工作。

标签： javascript angularjs promise

【解决方案1】：

尝试在广播后对您的范围对象调用 $apply()，它应该会强制执行一个更新 UI 的摘要循环。

【讨论】：

不幸的是，如果我尝试 $apply() 或 $digest() 错误：[$rootScope:inprog] $digest already in progress

【解决方案2】：

JavaScript 是单线程的，并且 - 从概念上讲 - GUI 中的更改与程序在同一个线程上。

这正是 Javascript API 中有这么多回调的原因（您可能已经注意到使用 AJAX）。绕过 JS 的单线程特性的唯一方法是根本不等待某事完成。而是 - 当某事完成时被回调。

你想要做的（长时间运行的计算）在 JS 中是非常不自然的，所以唯一真正的解决方案将是相当冗长的。您需要与您的代码并行运行一个 webworker，并等待它发出完成的信号。使用 webworkers 的最短的废话示例可能是 WHATWG 网站上的官方 HTML5 规范。

【讨论】：