Angular是否会干扰此点击事件绑定？
[英]Does Angular interfere with this click event binding?
问题描述
I created an angular-based mobile application and I do most click event binding via ng-click in the DOM. 
我创建了一个基于角度的移动应用程序，并且大多数单击事件绑定都是通过DOM中的ng-click进行的。 Unfortunately I had to use some jQuery because I needed to inject a new DOM element and then bind a click event to that: 不幸的是，我必须使用一些jQuery，因为我需要注入一个新的DOM元素，然后将click事件绑定到该元素：
$('<a href="">').on('click', function () {
alert('ok');
}).text('hello').appendTo($el);
For some reason this event never gets called though. 由于某种原因，此事件从未被调用。 Does Angular prevent this? Angular可以防止这种情况吗？
Update: I tried using $compile but that didn't help either: 更新：我尝试使用$ compile，但这没有帮助：
var newDirective = angular.element("<a href='' ng-click='onLinkClicked()'>test</a>");
$el.append(newDirective);
$compile(newDirective)($scope);
And also: 并且：
$scope.onLinkClicked = function () {
alert("ok");
};
4 个解决方案
解决方案1
1 2015-08-07 16:54:02
This happens most of the time because your jQuery section may run sooner than Angular finished its stuff and it tries to bind the click to a non existent element, it's not Angular preventing it. 多数情况下会发生这种情况，因为您的jQuery部分运行时间可能比Angular完成其工作的时间还早，并且它试图将单击绑定到一个不存在的元素上，但这并不是Angular阻止的。
You can test this by encapsulating the jQuery binding in a $timeout . 您可以通过将jQuery绑定封装在$timeout 。
If this is the case you may want to wait for your page/directive to compile the newly added element and only then run the jQuery binding. 如果是这种情况，您可能要等待页面/指令编译新添加的元素，然后才运行jQuery绑定。
By the way, this is not the proper way to manipulate the DOM when using Angular. 顺便说一下，这不是使用Angular时操作DOM的正确方法。 Most of the time you can bypass jQuery by using directives. 大多数时候，您可以使用指令绕过jQuery。
解决方案2
0 2015-08-07 17:01:46
The way you formulated it, you want to click on a specific <a href=""> element but Jquery does not know this expression as a valid CSS selector. 制定方式时，您想单击特定的<a href="">元素，但Jquery不知道此表达式是有效的CSS选择器。
I would not suggest to use Jquery combined with Angular. 我不建议将jQuery与Angular结合使用。 I should make use of the compile function within directives, but the JQuery code below will create an <a> element: 我应该在指令中使用compile函数，但是下面的JQuery代码将创建一个<a>元素：
$('<a href="">').appendTo('body').text('hello').appendTo($el);
解决方案3
0 已采纳 2015-08-07 18:02:45
A few days later I finally figured out what the problem was. 几天后，我终于弄清了问题所在。 I am the biggest idiot in the world. 我是世界上最大的白痴。 A few lines below the event binding I found this: 在事件绑定下面几行，我发现了这一点：
$scope.el = $el.html();
$scope.deliberatelyTrustDangerousSnippet = function () {
return $sce.trustAsHtml($scope.el);
};
Of course, converting the jQuery object to a plain HTML string will cause it to loose all bound event listeners because the conversion from text to DOM element will create a new node but not copy the attached event listeners. 当然，将jQuery对象转换为纯HTML字符串将导致它失去所有绑定的事件侦听器，因为从文本到DOM元素的转换将创建一个新节点，但不会复制附加的事件侦听器。
解决方案4
0 2015-08-08 16:32:36
A working example: 一个工作示例：
<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 buttonElement = $("<a href='' ng-click='newLinkClick()'>jquery created new link</a>");
var newLink = $compile(buttonElement[0])($scope);
$element[0].appendChild(newLink[0]);
newLink = $compile("<a href='' ng-click='newLinkClick()'>angular created new link</a>")($scope);
$element[0].appendChild(newLink[0]);
};
$scope.newLinkClick = function(){
alert("new link clicked");
}
}
}
});
</script>
</head>
<body ng-app="myApp">
<div my-control></div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.