Ionic - 按下按钮后显示旋转器

Question

这个来自 Ionic 的spinner选项一直在旋转，就像这里展示的一样。

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

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

- lewis4u

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。

这对我很有效，希望对你有所帮助。

- Mohan Gopi

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;
}

因此，当您按下按钮时，旋转器将显示。当然，您需要一些逻辑来停止它，但这只是为了向您展示如何处理它。希望这有所帮助。

- macrog

---

抱歉，请问MainCtrl在哪里？我正在使用Ionic-1，并且已经使用Ionic一周了（7天）。 - lewis4u

好的，如果你从CodePen打开一个链接，你会看到屏幕分成两列，左边是HTML，你需要将代码中的按钮部分粘贴在这里，右边是JS部分，其中包含MainCtrl。 - macrog

请问您能否来聊天室吗？ - lewis4u

我怎样才能进入聊天室？ - macrog

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
}

当您按下按钮时，它将立即显示旋转器。 问候。

- Hardik Vaghani