如何使用Jquery将click事件附加到AngularJS指令？

Question

我做了AngularJS指令 ，我在主页上加载了该文件，也有JQuery文件，当<p> Click </p>元素时，我在其中调用alert('it works') 。 这是例子。

/*
 * 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'
    };
});

方针.html文件

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

jQuery函数

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

对于我的实际问题，这只是一个简单的问题。 我已经注意到，角度指令的加载速度比触发警报消息的函数要慢。 因此，我没有选择器$("#clicked")选择任何内容。

*我应该如何在jquery中使用angular指令？ 除了使用jqlite之外，解决此jquery-angular问题的正确方法是什么？ *

Answer 1

拥有AngularJS时不要使用jQuery 。 您可以使用AngularJS的ng-click绑定元素上的click事件。

的HTML

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

的JavaScript

在控制器中

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

编辑

仍然要使用jQuery （ 不推荐 ）：

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

Answer 2

您可以使用angular ng-click 。 请参阅此文档 。

ngClick指令允许您指定单击元素时的自定义行为。

那么，为什么要使用jQuery？ AngularJs提供了一种处理指令事件并使用它们的最佳方法。