[英]AngularJs ng-click not working on Bootstrap dropdown
I am using bootstrap 3 CSS only without bootstrap js or jQuery with AngularJs framework, But I have a very basic usage issue which is ng-click
not get fired on bootstrap dropdown
我仅在没有 AngularJs框架的情况下使用bootstrap 3 CSS 而不使用bootstrap js或jQuery ,但是我有一个非常基本的用法问题,即
ng-click
不会在bootstrap dropdown
触发
HTML HTML
<div class="fc-couponThumbnail">
<i class="icon-ok" ng-if="coupon.couponMainImage=='couponThmub1'"></i>
<div class="dropdown">
<button type="button" class="dropdown-toggle" >
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li ><a ng-click="coupon.couponMainImage='couponThmub1';">set main image</a></li>
<li><a ng-click="coupon.couponThmub1=''">delete</a></li>
</ul>
</div>
as I am not using bootstrap js so I made this directive to get dropdown toggled 因为我没有使用bootstrap js,所以我做了这个指令来切换下拉菜单
angular.module('FansCoupon').directive('dropdownToggle', function () {
return{
restrict:'C',
link:function(scope,ele,attrs){
ele.on('click', function () {
ele.parent().toggleClass('open')
})
ele.on('blur', function () {
ele.parent().removeClass('open')
})
}
}
})
Edit I 编辑我
When I instantiate .dropdown
with open
class the ng-click
work properly! 当我使用
open
类实例化.dropdown
, ng-click
正常工作!
Edit II 编辑II
calling a function instead of do javascript directly in ng-click
didn't worked too. 调用函数而不是直接在
ng-click
中执行javascript也不起作用。
Finally the solution for my issue was to use Angular UI Bootstrap which handling all bootstrap components as angular Js directives so I used uib-dropdown
, uib-dropdown-toggle
and uib-dropdown-menu
最后,针对我的问题的解决方案是使用Angular UI Bootstrap,它将所有引导程序组件都作为angular Js指令处理,因此我使用了
uib-dropdown
, uib-dropdown-toggle
和uib-dropdown-menu
and my code now looks like : 现在我的代码如下所示:
<div class="dropdown" uib-dropdown >
<button type="button" uib-dropdown-toggle class="dropdown-toggle" >
<span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu >
<li ><a ng-click="coupon.couponMainImage=coupon.couponThmub4;">set main image</a></li>
<li><a ng-click="coupon.couponThmub4=''">delete</a></li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.