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（）関数呼び出しのすぐ下にあります。しかし、私が本当に望むのは、アニメーションが終了した後（例えば、3000ms後）にボタンを使用できることだけです。

Answer 1

問題は、命令のgo（）関数にあります。 setTimeout（）の代わりに$ timeoutを使用します。特定のタイムアウトの後にスコープを更新しているので、角度はスコープを更新したことを知らない。しかし、$ timeoutを使用すると、angleはスコープの呼び出しを処理します。$ apply（）は、スコープの変更を監視します。&はそれに従ってUIを更新します。

これは更新されたgo（）関数である必要があります。

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