AngularJS範圍$手錶BTN觸發

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，那麼angular會負責調用Scope。$ apply（），它將在其中觀察範圍更改&相應地更新UI。

這應該是更新的go（）函數。

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