jQuery不适用于ng-view内部的元素

约书亚·基斯顿

我对angular并不陌生，已经尝试修复了大约一个小时，但无法正常工作。我有一些html代码：

<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
    <i class="icon-warning-sign"></i>
    <span class="count">8</span>
</a>
<div class="pop-dialog">
    <div class="pointer right">
        <div class="arrow"></div>
        <div class="arrow_border"></div>
    </div>
    <div class="body">
 ...

默认情况下，通知弹出对话框是隐藏的，单击.notification-dropdown时，以下JQuery会显示该通知

    $(document).on("click", ".notification-dropdown", function (e) {
        e.preventDefault();
        e.stopPropagation();

        // hide all other pop-dialogs
        $(".notification-dropdown .pop-dialog").removeClass("is-visible");
        $(".notification-dropdown .trigger").removeClass("active");

        var $dialog = $(this).children(".pop-dialog");

        $dialog.toggleClass("is-visible");
    });

出于某种原因，当我将htmlng-view作为部分html装入AngularJS时，此代码不起作用。

我已经在Angular之前加载了JQuery库。

为了简化起见，我试图缩短代码，如果需要，我可以显示更多代码。

霍夫

最好尽量避免将jQuery与AngularJS一起使用。在jQuery的背景知识中，以Angular的新手习惯将两者同时使用是一个常见的错误。这是关于该主题的一个很好的答案：如果我有jQuery背景，请“在AngularJS中思考”？

您可以只使用ui bootstrap的下拉菜单。

另外，还有ngShow和ngIf。如果您仍然想使用自己的CSS类将其隐藏，则只需使用ngClass设置该类。

然后，您可以使用ngClick接收click事件。

这是它的外观（仅HTML，您甚至不必为此编写任何JS）：

<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
    <a href="#" class="trigger">
        <i class="icon-warning-sign"></i>
        <span class="count">8</span>
    </a>
    <div class="pop-dialog" ng-show="showDialog">
        <div class="pointer right">
            <div class="arrow"></div>
            <div class="arrow_border"></div>
        </div>
        <div class="body">
            <!-- body content -->
        </div>
    </div>
</li>

编辑：添加的代码
编辑： 正常工作

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。