我是角度的新手,已经尝试解决这个问题大约一个小时了,但无法让它工作。我有一些 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">
...
默认情况下,通知弹出对话框处于隐藏状态,单击通知下拉列表时,以下 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一起使用。以这种方式将两者一起使用是那些刚接触 Angular 的人的常见错误,来自 jQuery 背景。这里有一个关于这个主题的很好的答案:"Thinking in AngularJS",如果我有jQuery背景?
你可以只使用ui引导程序的下拉菜单。
或者,还有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>
编辑:添加的代码
编辑:工作扑克