Question

我有以下代码：

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

angular.module('slots', []).directive('slot', function () {
    var spin = {
        restrict: 'E',
        fn: {
            go: function (num) {
                spin.fn.addSlots(num);
                for(i = 1; i <= 5; i++){
                (function(i){
                    setTimeout(function(){
                    if(i==1){
                        spin.fn.moveSlots($('#slots .wrapper'),num);
                        } else {
                            spin.fn.moveSlots($('#slots .wrapper'+i),num);
                            }
                        }, 200 * i);
                    }(i));
                }
            },
            moveSlots: function (elem,num) {
                if(firstspin==1){
                var marginTop = parseInt(elem.css("margin-top"), 0);
                marginTop -= (num-0.5)*100;

                } else {
                    var marginTop = parseInt(elem.css("margin-top"), 0);
                marginTop -= num*100;
                }
                elem.stop(true,true);
                elem.animate(
                    {"margin-top":marginTop+"px"},
                    {'duration' : 4000, 'easing' : $.bez([0,0,1,1.05]), complete: function(){
                        if(firstspin<=5){
                        elem.children(".slot").slice(0,num-1).remove();
                        firstspin += 1;
                        } else {
                        elem.children(".slot").slice(0,num).remove();
                        }
                        elem.css( "margin-top", -50 );
                    }}
                );
            }
        },
        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(100);
                            scope.btnTrigger = false;
                        }
                    });
                }
            }
        }
    };
    return spin;
});

<div ng-app="myApp" ng-controller="MyCtrl">
  <slot trigger="btnTrigger"></slot>
     <button ng-click="btnClick()">Play</button>
</div>

这是老虎机游戏。在我的老虎机完成旋转动画之前，如何防止用户多次输入？ scope.btnTrigger = false;在动画完成之前触发。

Plunker Demo

Answer 1

您可以使用角度$q服务。您的代码可能如下所示：

bool temp = bf.bar;
*(*long)&bf = 0;
bf.bar = temp;

这将有助于完成您的任务。我没有测试过这段代码，但是你的解决方案应该更贴近这个.. :)）

禁用按钮触发，直到有效完成（angularjs）

1 个答案: