我只使用bootstrap 3 CSS,而没有使用AngularJs框架的bootstrap js或jQuery,但我有一个非常基本的使用问题,那就是ng-click
不会在bootstrap dropdown
上被解雇
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>
因为我没有使用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')
})
}
}
})
编辑I
当我用open
类实例化.dropdown
时,ng-click
工作正常!
编辑II
调用函数而不是直接在ng-click
中调用javascript也不起作用。
最后,我的问题的解决方案是使用Angular UI引导,它将所有引导组件作为Angular Js指令处理,所以我使用了uib-dropdown
、uib-dropdown-toggle
和uib-dropdown-menu
我的代码现在看起来像:
<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>