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

How can I toggle a loading indicator before or during anuglar's ng-click handler is run?

本文关键字：加载 指示器 运行 ng-click 处理 程序      更新时间：2023-09-26

我试图操纵我的DOM(显示/隐藏加载指示器)，同时运行通过ng-click指令触发的控制器动作。

我的代码是这样的:

控制器:

$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处理完成后才更新，这意味着用户永远无法看到它。

如何将更新传播到$作用域。在处理程序的其余部分执行之前切换到我的视图?

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

http://docs.angularjs.org/api/ng。rootScope.Scope #美元消化

你可以强制在$scope后面加一个摘要。Wip = true like that:

$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;
}
相关文章：