Question

我有一个使用UI路由器的角应用程序。我订阅了$ stateChangeStart和$ stateChangeSuccess事件，我正在使用ng-show指令显示/隐藏“isLoading”的控制器属性，用于加载指示符 outside 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和$ 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/

没有$ timeout

1 个答案: