Wie man Spinner oder lebhaftes Gif auf Knopfdruck zeigt, bis Nachricht angezeigt wird?

Question

Aus dem folgenden Code, ich möchte entweder laden Spinner oder animierte GIF, bis myMessage sollte angezeigt werden, wenn Sie auf Submit Schaltfläche auf timeout klicken. Wie kann ich das tun, bitte lass es mich wissen und danke im Voraus!

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

Hier ist der Code, der funktioniert. Sie müssen nur eine ng-show oder ng-hide auf dem font awesome icon hinzufügen und den Wert entsprechend ändern.

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> 

-Controller

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

Hier ist der Link zu JSFIDDLE zur Demonstration als Code-Schnipsel des Stackoverflow ist der CSS-Link awesome Schriftart nicht unterstützt.