CODEWITHSUNDEEP
javascriptangularjs
Lim SY
Lim SY

Reputation: 185

AngularJS scope.$watch btn trigger

I have an app similar to this:

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;
        }
    };
});

The problem is the button will not work after the first click. It works fine if I put the scope.btnTrigger = false; just below the spin.fn.go() function call. But what I really want is the button to be only available after the animation finished(which is after 3000ms for instance).

Upvotes: 1

Views: 94

Answers (1)

Sasank Sunkavalli
Sasank Sunkavalli

Reputation: 3964

The problem is with your go() function in directive. Use $timeout instead of setTimeout(). you are updating the scope after a specific timeout, so angular doesn't know that u have updated the scope. But if you use $timeout, then angular takes care of calling Scope.$apply(), where it watches the scope changes & updates the UI accordingly.

This should be the updated go() function.

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

Upvotes: 1

Related Questions