$가,

2017-10-05 21 views
0

내가, 실행 기능 하나 동안 마무리 한 후 버튼에 스피너를 보여 스피너를 숨기려면 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의 값이 콜백 함수에서 변경되지 않는 이유는 무엇입니까? 이 문제를 해결하는 방법?

답변

0

setTimeout이 Javascript 함수이므로이 문제는 범위 변수가 범위에서 업데이트되지 않는 문제를 일으킬 수 있습니다. 그러므로 우리는 이것을 위해 각형 래퍼를 사용해야합니다 ($timeout()).

자세한 내용 here는 아래


here이 질문에 대한 작업 바이올린입니다 참조 $timeout() 사이 setTimeout() 차이를 알 수 있습니다.

JSFiddle Demo