CODEWITHSUNDEEP
javascriptjqueryangularjs
Joshua Kissoon
Joshua Kissoon

Reputation: 3309

JQuery not working on elements inside ng-view

I'm new to angular, been trying to fix this for about an hour now but can't get it working. I have some html code:

<li class="notification-dropdown hidden-xs hidden-sm">
<a href="#" class="trigger">
    <i class="icon-warning-sign"></i>
    <span class="count">8</span>
</a>
<div class="pop-dialog">
    <div class="pointer right">
        <div class="arrow"></div>
        <div class="arrow_border"></div>
    </div>
    <div class="body">
 ...

The notification pop-dialog is hidden by default and the following JQuery shows it when the .notification-dropdown is clicked

    $(document).on("click", ".notification-dropdown", function (e) {
        e.preventDefault();
        e.stopPropagation();

        // hide all other pop-dialogs
        $(".notification-dropdown .pop-dialog").removeClass("is-visible");
        $(".notification-dropdown .trigger").removeClass("active");

        var $dialog = $(this).children(".pop-dialog");

        $dialog.toggleClass("is-visible");
    });

For some reason, this code does not work when I put the html into AngularJS's ng-view loaded as a partial into a main html document.

I've already loaded the JQuery lib before Angular.

I've tried to shorten the code for simplicity, I can show more code if needed.

Upvotes: 1

Views: 1944

Answers (1)

s-hoff
s-hoff

Reputation: 196

Best try to avoid using jQuery with AngularJS completely. Using both together in this fashion is a common mistake among those new to Angular, coming form a jQuery background. Here is a great answer on that topic: "Thinking in AngularJS" if I have a jQuery background?

You could just use ui bootstrap´s dropdown.

Alternatively, there are ngShow and ngIf. If you still want to use your own css class to hide it, just set the class with ngClass.

Then, you can use ngClick to recieve the click event.

Here is how it would look (HTML only, you dont even have to write any JS for this):

<li class="notification-dropdown hidden-xs hidden-sm" ng-click="showDialog = !showDialog">
    <a href="#" class="trigger">
        <i class="icon-warning-sign"></i>
        <span class="count">8</span>
    </a>
    <div class="pop-dialog" ng-show="showDialog">
        <div class="pointer right">
            <div class="arrow"></div>
            <div class="arrow_border"></div>
        </div>
        <div class="body">
            <!-- body content -->
        </div>
    </div>
</li>

EDIT : Added Code
EDIT : working plunk

Upvotes: 1

Related Questions