JQuery 不适用于 ng-view 中的元素

Question

我是 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");
    });

由于某种原因，当我将 html 放入 AngularJS 的 ng-view 中时，此代码不起作用，该 ng-view 作为部分加载到主 html 文档中。

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

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

Answer 1

最好尽量避免在 AngularJS 中完全使用 jQuery。以这种方式同时使用两者是 Angular 新手的常见错误，来自 jQuery 背景。这是关于该主题的一个很好的答案："Thinking in AngularJS" if I have a jQuery background?

你可以使用 ui bootstrap´s dropdown。

另外，还有ngShow 和ngIf。如果你还想用自己的css类来隐藏它，只需将类设置为ngClass即可。

然后，您可以使用ngClick 来接收点击事件。

这是它的外观（仅限 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>

编辑：添加代码
编辑：working plunk