如何在单击按钮时显示微调器或动画 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

这是有效的代码。您只需要在 font awesome 图标上添加一个 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;
    }
})

这里是 link 到 JSFIDDLE 的演示，因为 Whosebug 的代码片段不支持 css link 到很棒的字体。

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

How to show either spinner or animated gif on button click until message displayed?

javascript

jquery

gif

spinner

angularjs