如何在按钮单击时显示微调器或动画 gif，直到显示消息？

Question

从下面的代码中，我想显示加载微调器或任何动画 gif，直到单击 timeout 上的 Submit 按钮时应显示 myMessage。我该怎么做，请让我知道并提前感谢！

HTML：

<div ng-controller="Controller">
  <input type="text" id="inputId" ng-model="enteredMessage" 
autofocus/>
  <i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
  <button type="button"  ng-click="myFunction(enteredMessage)">Submit</button>
  Entered: {{myMessage}}
</div>

js:

var myApp = angular.module('myApp',[]);
  myApp.controller('Controller',['$scope','$timeout', function ($scope, $timeout) {
    $scope.myFunction = function(enteredTextMessage){
      $timeout(function() {
        //I need to show the spinner for three seconds until my myMessage loading/displaying complete 
        $scope.myMessage = enteredTextMessage;
      }, 3000);
    }
  }
]);

Fiddle.

Answer 1

这是有效的代码。您只需要在字体真棒图标上添加ng-show 或ng-hide 并调用相应地更改值。

HTML

<div ng-app='app' ng-controller='mainCtrl'>
<input type="text" id="inputId" ng-model="enteredMessage" 
autofocus/>
  <i class="fa fa-spinner fa-spin" style="font-size:24px" ng-show='showSpinner'></i>
  <button type="button"  ng-click="myFunction(enteredMessage)">Submit</button>
  Entered: {{myMessage}}
</div>

控制器

angular.module('app',[]).controller('mainCtrl', function($scope, $timeout){
    $scope.showSpinner = false;
    $scope.myFunction = function(enteredTextMessage){
      $timeout(function() {
        //I need to show the spinner for three seconds until my myMessage loading/displaying complete 
        $scope.showSpinner = false;
        $scope.myMessage = enteredTextMessage;
      }, 3000);
      $scope.showSpinner = true;
    }
})

这里是指向JSFIDDLE 的链接用于演示，因为stackoverflow 的代码sn-p 不支持字体真棒的css 链接。