javascript - 如果没有 $timeout，UI 路由加载微调器将无法工作

Question

我有一个使用 UI Router 的 Angular 应用程序。我已经订阅了 $stateChangeStart 和 $stateChangeSuccess 事件，并且我正在使用 ng-show 指令来显示/隐藏加载指示器的“isLoading” Controller 属性外部 ui-view 标签。我可以通过代码进行调试，并看到事件正在触发并且变量正在 JS 中设置，但似乎在开始事件和成功事件之间，DOM 从未更新，因此我的加载指示器从未显示。我可以让加载指示器显示的唯一方法是添加 0 秒的 $timeout 并在那里进行变量更新。

$rootScope.$on("$stateChangeStart", function() {
    ctrl.isLoading = true;
});
$rootScope.$on("$stateChangeSuccess", function(ev, to, toParams, from, fromParams) {
    $timeout(function() {
      ctrl.isLoading = false;
    }, 0);
});

这个 JSFiddle http://jsfiddle.net/uwhetx7q/2/展示了我正在挣扎的事情。

当应用 $timeout 时，即使是 0 秒，加载指示灯也会闪烁。但如果没有它，我的变量永远不会被 $apply'd。

我尝试实际调用 $apply 和 $digest，但收到错误消息，表明这些方法已经在进行中。

我希望有一些我遗漏的非常明显的东西可以让我的加载指示器显示，因为空的 $timeout 是一个糟糕的解决方案:)

谢谢!

Answer 1

您遇到范围/摘要计时问题。你的 ctrl.isLoading 将被设置，但是那个东西(我猜是旋转器)不会立即识别它。在当前摘要周期之后，您的变量将被更新。

这样做(这是常见且有效的):

$rootScope.$on("$stateChangeSuccess", function(ev, to, toParams, from, fromParams) {
    $timeout(function() {
      ctrl.isLoading = false;
    });
});

没有任何时间的$timeout将在当前摘要周期完成后运行。

有关范围/摘要/应用的更多信息:http://www.codingeek.com/angularjs/angular-js-apply-timeout-digest-evalasync/