Question

当页面上的指定字段为空时，我使用自定义指令触发元素上的动画。截至目前，当用户使用我的自定义指令单击该按钮时，动画将起作用一次。再次单击该按钮不会触发动画，我不知道为什么。我试图将.then（）与$ animate服务一起使用，但没有运气。

提前感谢您提供任何/所有帮助。

＆＃13;

(function () {

    'use strict'

    ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler])

    function cfWobbler($animate, $parse) {
        var ret = {
            restrict: 'A',
            link: link
        }

        return ret;

        function link(scope, elem, attrs) {
            var el = document.getElementById('division-holder');
            var fn = $parse(attrs['cfWobbler']);
            elem.on('click', function () {
                scope.$apply(function () {
                    if (fn(scope) === '') {
                        $animate.removeClass(el, 'bounceInDown');
                        debugger;
                        $animate.addClass(el, 'wobbler', function () {
                            $animate.removeClass(el, 'wobbler')
                        });
                    }
                });
            });
        }
    }
})();

＆＃13;

我开始工作但是我的控制台出错了。我知道我已经做了一个很大的＆＃34; No No＆＃34;至于Angular，但我不确定如何做到这一点。

以下是我的控制台中的错误。

错误：[$ rootScope：inprog] $申请已在进行中

这是我的工作代码。

＆＃13;

(function () {

    'use strict'

    ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler])

    function cfWobbler($animate, $parse) {
        var ret = {
            restrict: 'A',
            link: link
        }

        return ret;

        function link(scope, elem, attrs) {
            var el = document.getElementById('division-holder');
            var fn = $parse(attrs['cfWobbler']);
            elem.on('click', function () {
                scope.$apply(function () {
                    if (fn(scope) === '') {
                        debugger;
                        $animate.removeClass(el, 'bounceInDown');
                        $animate.removeClass(el, 'wobbler');
                        scope.$apply();
                        $animate.addClass(el, 'wobbler');
                    }
                });
            });
        }
    }
})();

＆＃13;

Answer 1

让它工作，在控制台中没有错误。

(function () {

    'use strict'

    ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler])

    function cfWobbler($animate, $parse) {
        var ret = {
            restrict: 'A',
            link: link
        }

        return ret;

        function link(scope, elem, attrs) {
            var el = document.getElementById('division-holder');
            var fn = $parse(attrs['cfWobbler']);
            elem.on('click', function () {
                scope.$apply(function () {
                    $animate.removeClass(el, 'bounceInDown');
                    $animate.removeClass(el, 'wobbler');
                });
                scope.$apply(function () {
                    if (fn(scope) === '') {
                        $animate.addClass(el, 'wobbler');
                    }
                });
            });
        }
    }
})();

使用AngularJS的可重复动画

1 个答案: