我正在使用 bootstrap 3 CSS 仅在没有 bootstrap js 或 jQuery 的情况下使用 AngularJs 框架,但我有一个非常基本的使用问题,即 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')
})
}
}
})
编辑我
当我使用 open
类实例化 .dropdown
时,ng-click
正常工作!
编辑二
在 ng-click
中直接调用函数而不是执行 javascript 也不起作用。
最佳答案
最后,我的问题的解决方案是使用 Angular UI Bootstrap,它将所有 Bootstrap 组件作为 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>
关于javascript - AngularJs ng-click 不适用于 Bootstrap 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36306557/