jQuery.on（“click”）在AngularJs中不起作用

Question

我有一个像这样的AngularJs指令：

app.directive("showSuccess", function () {
        return {
            restrict: "A",
            link: function (_scope, _element) {
                _scope.$watch("successMessage", function (newVal) {
                    if (newVal) {
                        $(_element).find("#successMessage").html(newVal);
                        $(_element).slideDown().delay(3000).slideUp();
                    }
                });

                // Below code does not work
                $(_element).find(".hide-message").on("click", function () {
                    $(_element).slideUp();
                    _scope.successMessage = "";
                });
            }
        };
    });

相关的HTML是：

<div class="ui-state-success" show-success>
    <i class="icon-ok-sign small"></i>
    <span id="successMessage"></span>
    <i class="icon-remove hide-message"></i>
</div>

触发面板向下滑动时，屏幕截图为：

问题是，当我点击“×”时，面板不会向上滑动（尽管它会在3秒延迟后向上滑动）。

我知道我可以使用ng-click执行此操作。但有人知道为什么它在这种情况下不起作用？感谢。

Answer 1

这是因为jQuery动画排队。你在它上面打.slideUp()并期望它立即滑动;然而，它目前正在等待它的3秒延迟。

一种解决方案是使用.stop(true, false)取消之前排队的动画：

$(_element).find(".hide-message").on("click", function () {
    $(_element).stop(true, false).slideUp();
    _scope.successMessage = "";
});