如何在按钮上单击显示微调框或动画gif，直至显示消息？

Question

从下面的代码中，我想要显示加载微调框或任何动画gif，直到myMessage应显示在timeout上点击Submit按钮上。我该如何做到这一点，请让我知道，并提前致谢！

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

这里是计算器的代码段是不支持的CSS链接到字体真棒链接JSFIDDLE示范。