JQuery没有处理ng-view中的元素

时间:2014-09-18 14:28:54

标签: javascript jquery angularjs

我是棱角分明的新手,一直试图解决这个问题大约一个小时,但是无法让它发挥作用。我有一些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库。

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

1 个答案:

答案 0 :(得分:1)

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

你可以使用ui bootstrap´s dropdown

或者,有ngShowngIf。如果您仍想使用自己的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