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（）函数在指令中。使用$ timeout而不是setTimeout（）。您是在特定超时后更新范围，因此angular不知道您已更新范围。但是如果你使用$ timeout，那么angular负责调用Scope。$ apply（），它会监视范围变化＆amp;相应地更新UI。

这应该是更新的go（）函数。

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

AngularJS范围。$ watch btn trigger

1 个答案: