How to attach click event to AngularJS directive with Jquery?

Question

I made AngularJS directive, that i load on my home page, also i have JQuery file, where i call alert('it works') when <p> Click </p> element is clicked. Here is the example.

/*
 * This is the directive
 */

outsource.directive('mydirective', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attribute) {
            // Link
        },
        replace: true,
        templateUrl: 'src/app/components/views/directive.html'
    };
});

directive.html file

<p id="clicked"> Click </p>

jquery function

$(document).ready(function() {
    $("#clicked").click(function() {
        alert('it works');
    });
});

This is just a simple question for my real problem. I've notices that angular directive is loaded slower than my function that fires alert message. Because of that i have nothing selected by my selector $("#clicked").

*How i should use angular directive with jquery? What is the right way to solve this jquery-angular issue beside using jqlite? *

Tushar · Accepted Answer · 2015-08-27 08:09:07Z

8

Don't use jQuery when you have AngularJS. You can use ng-click of AngularJS to bind click event on elements.

HTML

<p ng-click="clickHandler()">...</p>

JavaScript

In controller

$scope.clickHandler = function() {
    alert('clicked');
};

EDIT

Still you want to use jQuery(Not Recommended):

$(document).on('click', "#clicked", function() {
    alert('it works');
});

edited Aug 27, 2015 at 8:09

answered Jun 2, 2015 at 7:16

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

2 Comments

Vesko Vujovic Over a year ago

Ok i know how to use ng-click. But what if i have 20 elements where i must trigger alert message? How can i do that? With jquery i just select all elements, and attach event on them.

Tushar Over a year ago

@VeskoVujovic No. Add ng-click to all of them

Radonirina Maminiaina · Accepted Answer · 2015-06-02 07:25:48Z

0

You can use angular ng-click. See this docs.

The ngClick directive allows you to specify custom behavior when an element is clicked.

So why you want to use jQuery? AngularJs provide a best way to handle event for directives, use them.

edited Jun 2, 2015 at 7:25

answered Jun 2, 2015 at 7:17

Radonirina Maminiaina

7,0144 gold badges35 silver badges63 bronze badges

2 Comments

Jeremy Thille Over a year ago

The answer is, strictly speaking, correct; but talking about quality, Tushar's answer is way above. He says the same thing but explains it and gives an actual answer.

CodingIntrigue Over a year ago

I'm not even convinced this does answer the question. It is more of a comment

Collectives™ on Stack Overflow

How to attach click event to AngularJS directive with Jquery?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related