javascript - 如何在运行 anuglar 的 ng-click 处理程序之前或期间切换加载指示器？

Question

我试图在运行通过 ng-click 指令触发的控制器操作时操作我的 DOM（显示/隐藏加载指示器）。

我的代码如下所示：

控制器：

$scope.wip = false;

// set currently listed categroy
$scope.setCurrentCategory = function( category ) {
  $scope.wip = true;
  //...expensive re-filtering here...
  $scope.wip = false;           
};

看法：

<div ng-repeat="category in categories">
  <a href="#" ng-click="setCurrentCategory(category);" >{{ category.name }}</a>
  <img ng-cloak ng-show="wip" src="icons/spinner-mini.gif" />
</div>

现在发生的情况是负载指示器仅在整个 ng-click 处理完成后才更新，这意味着用户永远看不到它。

在执行其余处理程序之前，如何将 $scope.wip 的更新传播到我的视图？

Answer 1

我认为问题在于在 setCurrentCategory 函数结束之前没有调用范围摘要。

http://docs.angularjs.org/api/ng.$ro​​otScope.Scope#$digest

您可以像这样在 $scope.wip = true 之后强制进行摘要：

$scope.setCurrentCategory = function( category ) {
  $scope.wip = true;
  $scope.digest()
  //...expensive re-filtering here...
  $scope.wip = false;           
};

我不知道在已经生命周期的函数中触发摘要是否是最好的主意，但它应该可以工作。

我认为这样做的另一种方法是让范围函数更改 wip ：

$scope.setCurrentCategory = function( category ) {
  $scope.toggleWip();
  //...expensive re-filtering here...
  $scope.toggleWip();           
};
$scope.toggleWip = function() {
  $scope.wip = !$scope.wip;
}