Comment afficher un gif animé ou un gif animé sur un clic de bouton jusqu'à ce que le message s'affiche?

Question

À partir du code ci-dessous, je veux afficher soit spinner de chargement ou tout gif animé jusqu'à ce que myMessage devrait être affiché en cliquant sur le bouton Submit sur timeout. Comment puis-je faire cela, s'il vous plaît faites le moi savoir et merci d'avance!

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

Voici le code qui fonctionne. Vous avez juste besoin d'ajouter un ng-show ou ng-hide sur l'icône de la police génial et appelez changer la valeur en conséquence.

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> 

Contrôleur

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

Voici le lien vers JSFIDDLE pour la démonstration que l'extrait de code de stackoverflow ne supporte pas le lien css à la police impressionnante.