click function does not working with ng-if

Question

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.

nowhere in your code you are using `ng-click`. `$().click()` has different functionalities — Aleksey Solovey, Jan 08 '18 at 10:30
Are you implement your application with angularjs? If yes, then why are you using jquery click function()? — Ramesh Rajendran, Jan 08 '18 at 10:33
@athi try swapping `ng-if` with `ng-show`. Also [avoid using jQuery](https://stackoverflow.com/a/15012542/8495123) — Aleksey Solovey, Jan 08 '18 at 10:37
no.. jquery and angular js issues... thanks for the hint.. :) thanks @AlekseySolovey, Ramesh Rajendran — athi, Jan 08 '18 at 10:48
@athi please check with my answer if you want use jquery event in angularjs — Ramesh Rajendran, Jan 08 '18 at 11:06

score 1 · Answer 1 · edited Jan 08 '18 at 11:08

1

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...

edited Jan 08 '18 at 11:08

Ramesh Rajendran

37,412
45
153
234

answered Jan 08 '18 at 10:47

athi

123
9

But appreciate your works. But do you know why the click does not working if you are using `ng-if`? – Ramesh Rajendran Jan 08 '18 at 10:48
@RameshRajendran my guess it that unlike `ng-show`, `ng-if` doesn't hide the content but [removes DOM entirely](https://docs.angularjs.org/api/ng/directive/ngIf#overview). Since jQuery isn't part of AngularJS's digest cycle, the div with `moreMenu` class is not rendered yet for `$(...)` to grab it – Aleksey Solovey Jan 08 '18 at 10:55

score 0 · Answer 2 · answered Jan 08 '18 at 10:44

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

score 0 · Answer 3 · answered Jan 08 '18 at 11:06

@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>

click function does not working with ng-if

3 Answers3