$、私は機能<strong>中に1回の</strong>ランニングをボタンにスピナーを表示し、終了後、スピナーを非表示にする

Question

をangularjs、これは私が試したものです：

<div ng-controller="MyController">  
     <button ng-click="InsertData()"> 

      <i class="fa fa-refresh fa-spin" ng-show="loading"></i>Loading 
     </button> 
     <br /> 
     {{loading}} 
    </div> 

とこれはcontroller.js

angular.module('MyApp', []).controller('MyController', function ($scope) { 

$scope.InsertData=function() 
{ 
    $scope.loading = true; 
    $scope.one($scope.two); 

} 

$scope.one = function (callback) { 

    setTimeout(function() { alert("this is function one"); callback(); }, 1000); 

} 

$scope.two = function() { 
    alert("two"); 
    $scope.loading = false; 

} 

}); 

が、このラインである

$scope.loading = false; 

は実行されません！それより上の行が走っていますが、私は警告（「two」）が現れることを意味します！

$ scope.loadingの値がコールバック関数で変更されないのはなぜですか？どのようにこの問題を解決するには？

Answer 1

問題は、setTimeoutがJavascript関数であるため、スコープ変数がスコープ内で更新されないという問題が発生するためです。したがって、これには角度ラッパー（$timeout()）を使用する必要があります。以下はhere

---

を参照してください$timeout()とsetTimeout()との違いを知る

詳細hereは、質問のための作業フィドルです。

JSFiddle Demo