jQuery不适用于ng-view内部的元素 [英] JQuery not working on elements inside 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");
    });

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

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

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

解决方案

最好避免完全将jQuery与AngularJS结合使用.在jQuery的背景知识中，以Angular的新手习惯将两者同时使用是一个常见的错误.这是该主题的一个很好的答案:"Thinking in AngularJS"；如果我有jQuery背景?

您可以只使用ui 引导程序的下拉列表.

>

或者，还有 ngShow 和 ngClass设置该类.

然后，您可以使用 ngClick 来接收点击事件. /p>

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

添加了代码
正在工作的朋克

I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:

<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">
 ...

The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked

    $(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");
    });

For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.

I've already loaded the JQuery lib before Angular.

I've tried to shorten the code for simplicity, I can show more code if needed.

解决方案

Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?

You could just use ui bootstrap´s dropdown.

Alternatively, there are ngShow and ngIf. If you still want to use your own css class to hide it, just set the class with ngClass.

Then, you can use ngClick to recieve the click event.

Here is how it would look (HTML only, you dont even have to write any JS for this):

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

EDIT : Added Code
EDIT : working plunk

这篇关于jQuery不适用于ng-view内部的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！