AngularJS сфера $ часы БТН триггер

Question

У меня есть приложение, похожее на это:

angular.module('slots', []).directive('slot', function() { 
    var spin = { 
     fn: { 
      go: function (scope) { 
       //many code and functions here(animation for 3000ms) 
       //i will just use setTimeout for example 
       setTimeout(function() { 
       scope.btnTrigger = false; 
       }, 3000) 
      }, 
      link: function (scope, ele, attrs) { 
       if (attrs.trigger && attrs.trigger !== undefined) { 
        if (scope[attrs.trigger] !== undefined) { 
         scope.$watch(attrs.trigger, function (newValue, oldValue) { 
          if (newValue) { 
           spin.fn.go(scope); 
          } 
         }); 
        } 
       } 
      } 
     }; 
    return spin; 
}); 

var myApp = angular.module('myApp',['slots']); 
myApp.controller('MyCtrl', function ($scope, $timeout) { 
    $scope.btnTrigger = false; 
    $scope.btnClick = function() { 
     if($scope.btnTrigger == false){ 
     $scope.btnTrigger = true; 
     } 
    }; 
}); 

Проблема кнопка не будет работать после первого щелчка. Он отлично работает, если я помещаю scope.btnTrigger = false; чуть ниже вызова функции spin.fn.go(). Но я действительно хочу, чтобы кнопка была доступна только после завершения анимации (например, после 3000 мс).

Answer 1

Проблема заключается в вашей функции go() в директиве. Используйте $ timeout вместо setTimeout(). вы обновляете область действия после определенного таймаута, поэтому угловой не знает, что вы обновили область действия. Но если вы используете $ timeout, то угловой позаботится о вызове Scope. $ Apply(), где он отслеживает изменения области & соответственно обновляет интерфейс.

Это должна быть обновленная функция go().

go: function (scope) { 
      //many code and functions here(animation for 3000ms) 
      $timeout(function() { 
      scope.btnTrigger = false; 
      }, 3000); 
     }