Как связать событие click с директивой AngularJS с JQuery?

Question

Я сделал AngularJS директиву, что я загрузить на моей домашней странице, а также у меня есть JQuery файл, где я называю alert('it works') когда <p> Click </p> элемент щелкнул. Вот пример.

/* 
* 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 файл

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

JQuery функция

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

Это всего лишь простой вопрос для моей реальной проблемы. Я замечаю, что угловая директива загружается медленнее, чем моя функция, которая запускает предупреждающее сообщение. Из-за этого у меня ничего не выбрано моим селектором $("#clicked").

* Как я могу использовать угловую директиву с jquery? Каков правильный способ решить эту проблему с jquery-угловым рядом с использованием jqlite? *

Answer 1

Не используйте jQuery, если у вас есть AngularJS. Вы можете использовать ng-click of AngularJS, чтобы связать событие click.

HTML

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

JavaScript

В контроллере

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

EDIT

Тем не менее вы хотите использовать jQuery (Не рекомендуется):

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

Answer 2

Вы можете использовать угловой ng-click. См. Это docs.

Директива ngClick позволяет указать пользовательское поведение при нажатии элемента .

Итак, почему вы хотите использовать jQuery? AngularJs обеспечивают лучший способ обработки событий для директив, использовать их.