$ scope Variable nicht in Callback-Funktion ändern, AngularJS

Question

I ein läuft und nach Beendigung verstecken Spinner einen Spinner in Taste während der Funktion angezeigt werden soll, ist es das, was ich versucht:

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

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

und dies ist 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; 

} 

}); 

aber diese Linie

$scope.loading = false; 

wird nicht ausgeführt! obwohl Linie darüber läuft, ich meine Alarm ("zwei") erscheint!

Warum ändert sich der Wert von $ scope.loading nicht in Callback-Funktion? Wie löst man dieses Problem?

Answer 1

Das Problem ist, weil Sie setTimeout verwenden, die eine Javascript-Funktion ist, wird dies Probleme verursachen, wobei die Bereichsvariable nicht im Bereich aktualisiert wird. Daher müssen wir die eckige Hülle verwenden, die $timeout() ist.

Mehr Details here, kennen den Unterschied zwischen $timeout() und setTimeout() siehe here

---

Unten finden Sie eine Arbeits Geige für die Frage ist.

JSFiddle Demo