Переменная $scope не изменяется в функции обратного вызова, angularjs

Question

Я хочу показать спиннер на кнопке во время выполнения функции один, а после окончания скрыть блесну, вот что я пробовал:

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

не выполняется! хотя строка над ним проходит, я имею в виду предупреждение ("два")!

почему значение $scope.loading не изменяется в функции обратного вызова? Как решить эту проблему?

Answer 1

Проблема в том, что вы используете setTimeout которая является функцией Javascript, это вызовет проблемы, когда переменная области не будет обновлена ​​в области. Следовательно, мы должны использовать угловую обертку для этого, который $timeout(),

Подробнее здесь, чтобы узнать разницу между $timeout() а также setTimeout() обратитесь сюда

---

Ниже приводится рабочая скрипка для вопроса.

JSFiddle Demo