AngularJs ng-click not working on Bootstrap dropdown

Question

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-clicknot get fired on 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>

as I am not using bootstrap js so I made this directive to get dropdown toggled

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!

Edit II

calling a function instead of do javascript directly in ng-click didn't worked too.

Could you try and call a method instead? E.g. 'showHideCoupon()' or something, not convinced about doing assignment in ng-click directly is a good idea — cYrixmorten
– cYrixmorten, Commented Mar 30, 2016 at 11:08
@fljs Thanks for your comment, the link you provided is not related to my issue the issue of this link is about using filters and ng-repaet in bootstrap dropdown which I am not using at all plus I am not working with jQuery or bootstrap js — Peter Wilson
– Peter Wilson, Commented Mar 30, 2016 at 11:21

Peter Wilson · Accepted Answer · 2016-03-31 11:34:18Z

1

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

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>

answered Mar 31, 2016 at 11:34

Peter Wilson

4,3175 gold badges40 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cst1992 Over a year ago

You could try escaping the quotes if you want, that might also make the first one work: ng-click="coupon.couponThumb4=\"\"". Also, is it Thumb or Thmub?

Peter Wilson Over a year ago

@cst1992 thanks for your reply! .. my issue is the ng-click not fired even if I called a function instead of write any expressions

Collectives™ on Stack Overflow

AngularJs ng-click not working on Bootstrap dropdown

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related