我是棱角分明的新手,一直试图解决这个问题大约一个小时,但是无法让它发挥作用。我有一些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库。
为了简单起见,我试图缩短代码,如果需要,我可以显示更多代码。
答案 0 :(得分: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