Angular会干扰这个点击事件的绑定吗?
Angular会干扰这个点击事件的绑定吗?
我创建了一个基于Angular的移动应用程序，并且大部分点击事件绑定都是通过DOM中的ng-click实现的。不幸的是，我不得不使用一些jQuery，因为我需要插入一个新的DOM元素，然后绑定一个点击事件：
$('').on('click', function () {
alert('ok');
}).text('hello').appendTo($el);
但出于某种原因，这个事件从未被调用过。Angular会阻止这个吗？
更新：我尝试使用$compile，但也没有帮助：
var newDirective = angular.element("test");
$el.append(newDirective);
$compile(newDirective)($scope);
还有：
$scope.onLinkClicked = function () {
alert("ok");
};
Angular是否干扰了这个点击事件绑定的原因是，使用jQuery选择器时，无法识别<a href="">作为有效的CSS选择器。解决方法是不建议在Angular中使用jQuery，而应该使用指令中的编译函数。以下是使用jQuery创建<a>元素的代码示例：
$('<a href="">').appendTo('body').text('hello').appendTo($el);
在这里，并没有选择元素，而是创建了一个新的节点。但是，仍然存在问题：jQuery使用CSS选择器，<a href=""'>不是一个有效的CSS选择器。根据问题描述，你绑定了一个点击事件到这个元素上。如果元素没有id，我认为使用'a'作为选择器也可以工作。示例代码：[plnkr.co/edit/ZDNsFlOkmseZSnhErnbz?p=preview](http://plnkr.co/edit/ZDNsFlOkmseZSnhErnbz?p=preview)
我更新了代码，使其创建一个新的<a>元素。参考链接：[api.jquery.com/jquery/#jQuery2](http://api.jquery.com/jquery/#jQuery2)
Angular是否会干扰这个点击事件绑定的问题，主要是因为jQuery部分可能在Angular完成其任务之前运行，并尝试将点击事件绑定到一个不存在的元素上，而不是Angular阻止它。可以通过在$timeout中封装jQuery绑定来进行测试。如果是这种情况，您可能希望在页面/指令编译新添加的元素之后再运行jQuery绑定。顺便说一下，在使用Angular时，这不是操作DOM的正确方式。大多数情况下，您可以通过使用指令来绕过jQuery。您的timeout应该在添加元素后调用，否则它是无用的。然后，您可以尝试将时间增加到一个荒谬的值，看看元素是否绑定到了点击事件。我猜您已经查看了DOM，以确定在插入后实际存在您的元素？如果我可以点击它，那么我猜它存在:)
Angular.js与点击事件绑定相互干扰的原因是因为在这个示例中，当点击"create new link"按钮时，会动态创建一个包含ng-click指令的链接。这个链接是通过Angular的$compile服务编译的，以使它能够与作用域进行绑定。
然而，由于jQuery和Angular.js之间的不兼容性，这个编译的链接无法与Angular的作用域正确绑定。因此，当点击这个链接时，ng-click事件无法触发。
解决这个问题的方法是使用Angular的ng-click指令替代jQuery来创建链接。这样，链接将能正确与作用域绑定，ng-click事件也能正常触发。
下面是修改后的代码示例：
<html>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.directive("myControl", function($compile){
return{
template: "<button ng-click='createNewLink()' >create new link</button>",
controller: function($scope, $element){
$scope.createNewLink = function(){
var newLink = angular.element("<a href='' ng-click='newLinkClick()'>angular created new link</a>");
$element[0].appendChild(newLink[0]);
};
$scope.newLinkClick = function(){
alert("new link clicked");
}
}
}
});
</script>
</head>
<body ng-app="myApp">
<div my-control></div>
</body>
通过使用angular.element来创建链接，代码就能够正确地与Angular的作用域进行绑定，从而确保ng-click事件能够正常触发。