[英]jQuery or jqlite not working with elements inside <ng-view></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">
...
默认情况下,通知pop-dialog是隐藏的,单击.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新手中,以这种方式同时使用两者是一个常见的错误。 这是关于该主题的一个很好的答案: 如果我有jQuery背景,请“在AngularJS中思考”?
您可以只使用ui bootstrap的下拉菜单 。
另外,还有ngShow和ngIf 。 如果您仍然想使用自己的CSS类将其隐藏,则只需使用ngClass设置该类。
然后,您可以使用ngClick接收click事件。
这是它的外观(仅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>
编辑:添加代码
编辑: 工作不爽
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.