Question

离子的这个spinner选项一直在旋转Like here

<ion-spinner icon="spiral"></ion-spinner>

如何在用户按下按钮之后使旋转器旋转，而不是之前！？

Answer 1

你也可以在你的控制器里试试这个

$scope.show = function() {
        $ionicLoading.show({
          template: '<p>Loading...</p><ion-spinner icon="android"></ion-spinner>'
        });
      };

      $scope.hide = function(){
        $ionicLoading.hide();
      };

您可以致电$scope.show($ionicLoading);启动微调器，然后使用此$ionicLoading.hide();

结束

当然，您必须在控制器中注入 $ ionicLoading 。

它对我有用，希望它能帮到你

Answer 2

您可以简单地显示和隐藏ion-spinner指令。在codepen链接中，您可以更改按钮部分并粘贴：

<button type="submit" ng-click="click()" class="button button-block button-positive">
    <ion-spinner ng-hide="showing" class="spinner-energized"></ion-spinner>
    <span class="button-text">Click me!</span>
</button>

并添加到MainCtrl

$scope.showing = true;
$scope.click = function(){
    $scope.showing = false;
}

所以当你按下按钮时，微调器会显示。当然你需要一些逻辑来阻止它，但这只是为了向你展示如何处理这个问题。希望它有所帮助。

Answer 3

<强> HTML

<button ng-Click="someFunction()"></button>

<强>控制器

$scope.someFunction = function(){     
     $ionicLoading.show({
              noBackdrop :false,
              template: ' <ion-spinner icon="spiral"></ion-spinner>',
              duration :20000//Optional
          });
     //Do Something
     $ionicLoading.hide();//Hide it after Something is completed
}

按下按钮后会显示微调器。此致

Ionic - 按下按钮后显示微调器

3 个答案: