javascript - 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>

当触发面板向下滑动时，截图为:

问题是，当我点击“×”时，面板不会向上滑动(尽管延迟3s后它仍然会向上滑动)。

我知道我可以使用 ng-click 来做到这一点。但是有人知道为什么它在这种情况下不起作用吗？谢谢。

Answer 1

这是因为 jQuery 动画排队。您在其上调用 .slideUp() 并期望它立即滑动；但是，它目前正在等待 3 秒的延迟。

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

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