current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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? *

share|improve this question
up vote 5 down vote

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');
});
share|improve this answer
2  
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. – Vesko Vujovic Jun 2 '15 at 7:24
    
@VeskoVujovic No. Add ng-click to all of them – Tushar Jun 2 '15 at 7:25
up vote 0 down vote

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.

share|improve this answer
2  
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. – Jeremy Thille Jun 2 '15 at 7:19
    
I'm not even convinced this does answer the question. It is more of a comment – CodingIntrigue Jun 2 '15 at 7:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.