CODEWITHSUNDEEP
javascriptangularjs
athi
athi

Reputation: 123

click function does not working with ng-if

If i use like following,I got what i need.. Here is the code.

<style>
  .moreMenu {
        position: absolute;
        right: 0px;
        z-index: 10;
        padding: 10px;
        color: #666;
        border-radius: 0 0 0 4px;
        background: #FFF;
        display: none;
        border-top: 1px solid #DDD;
    }
</style>
 <i class="fa fa-ellipsis-v tbButton otherOptions rightSide"  aria-hidden="true"></i>
    <div class="moreMenu">
          heloo
   </div>
<script>
  $(".otherOptions").click(function () {

                $(".moreMenu").slideToggle("fast");
            });
</script>

But if i use ng-if condition,

 <i class="fa fa-ellipsis-v tbButton otherOptions rightSide"  aria-hidden="true" ng-if="member==''"></i>

click function is not working.

Upvotes: 0

Views: 76

Answers (3)

athi
athi

Reputation: 123

I solved the issue..

<i class="fa fa-ellipsis-v tbButton otherOptions rightSide"  aria-hidden="true" ng-if=members==''" ng-click="mymore()"></i>


// controller
     $scope.mymore = function(){    
        $(".moreMenu").slideToggle("fast");
    }

Thanks all for the informations...

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

@athi is your answer is a proper answer. But as per the question I have answered here use ng-show instead of ng-if. 

angular.module("a",[]).controller("ac",function($scope){
   

    });
.otherOptions
{
color: #666;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="a" ng-controller="ac">
 <input class="otherOptions" type="button" value="hello" ng-click="mymore()" ng-show=true>
    <div class="moreMenu">
          heloodfg
   </div>
   </div>
 <script>
 $(".otherOptions").click(function () {
        $(".moreMenu").slideToggle("fast");
    });
 </script>

Upvotes: 0

George
George

Reputation: 2026

It would be better to use ng-click but if you need to use jQuery's click event, you can add a filtered click event to the body:

$('body').on('click', '.otherOptions', function() {
  $('.moreMenu').slideToggle('fast');
});

this will add an event handler on the body but will only trigger if the event bubbles up from the otherOptions element. This is an approach to handling dynamic content with jQuery events

Upvotes: 0

Related Questions