摘要循环以角度运行时防止按钮单击

Question

我正在通过单击按钮更新 $scope，这基本上是进行 Restangular 调用、获取数据并填充 $scope 变量。

但是，如果用户在 $digest 循环运行时多次单击该按钮，则 $scope 会更新为重复值。

我很确定这是一个常见问题。但是，我在 SO 上还没有遇到我正在寻找的解决方案。

人们建议使用$timeout，但这似乎不合逻辑。

我宁愿在$digest 循环运行时禁用该按钮。

这是我目前实现的。

$scope.names = [];
$scope.disableButton = true;
FetchNames.getAllNames().then(function(result){
  result.data.forEach(function(name){
    $scope.names.push(name);
  });
$scope.disableButton = false;
});

在这里，当 promise 得到解决时，按钮被禁用。 但这并不能解决我的问题。我需要检查摘要周期何时完成。

Answer 1

试试这个：

$scope.names = [];
$scope.disableButton = true;
FetchNames.getAllNames().then(function(result){
  // if in digest; reuturn
  if($scope.$$phase || $scope.$root.$$phase ){return}
  result.data.forEach(function(name){
    $scope.names.push(name);
  });
$scope.disableButton = false;
});

Answer 2

我认为这会对你有所帮助

Angular JS identify an digest complete event and removing # from url in angular js during viewchange

还有这个link

Answer 3

当用户点击按钮时，使用 ng-disabled 内置指令禁用按钮。要实现这一点，只需将变量设置为 true。看下面的代码

<button ng-click="btn1=true, yourFunction()" ng-disabled='btn1'>

在你的控制器中可以是这样的

    $scope.btn1= false;
    $scope.yourFunction= function(){
      $scope.names = [];
      FetchNames.getAllNames().then(function(result){
        result.data.forEach(function(name){
          $scope.names.push(name);
       });
       $scope.disableButton = false;
     };