AngularJs ng点击Bootstrap下拉菜单中的not working

AngularJs ng-click not working on Bootstrap dropdown

本文关键字：not working 下拉菜单 ng 点击 Bootstrap AngularJs      更新时间：2023-09-26

我只使用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>
相关文章：