jQuery的单击事件不与AngularJS工作 [英] jQuery click events not working with AngularJS
问题描述
我在我的multipaged PHP + jquery的网站转换成一个单页的角应用的过程。不过，我已经写了很多code使用jQuery已经所以只打算交换PHP角形的问候路由等。
一个问题我也碰到过，我想不通的是，我已经使用了jQuery的点击事件，直到转换已经停止工作。如果改变code，使其从火而不是NG点击它会工作，另外，如果我打电话从控制台的功能。 jQuery是工作，我把一些jQuery提到的功能内，它工作得很好。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=对myApp＆GT;
＆LT; HEAD＆GT;
＆LT;链接HREF =CSS / header.css的rel =stylesheet属性＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =https://cdn.firebase.com/js/client/2.2.4/firebase.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =https://cdn.firebase.com/libs/angularfire/0.9.2/angularfire.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的'SRC ='JS / header.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的'SRC ='main.js'＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;头页＆GT;＆LT; /头页＆GT;
main.js
VAR mainApp = angular.module（'对myApp'，['火力'，'headerPage']）;mainApp.directive（'headerPage'，函数（）{
返回{
限制：'E'，
templateUrl：HTML / header.html中
}
}）;
header.js
（函数（）{
VAR应用= angular.module（'headerPage'，['火力']）; app.controller（headController，['$ HTTP，$火力点，$范围，$过滤'，
功能（$ HTTP，$火力点，$范围，$过滤器）{
//大部分code的
}
]）;
}）（）;$（＃myElement）。在（点击，函数（）{
的console.log（点击）;
}）;
究其原因是因为，当你绑定事件的元素 #myElement 元素不存在然而。由于该元素所呈现的指令模板的一部分，你需要移动绑定处理指令链接功能中。嗯，你可以在技术上使用事件代表团来解决这个问题，但它是在黑客只是一个黑客。最好的办法是使用 NG-点击本身元素（你已经说你已经尝试了）上。
I am in the process of converting my multipaged php + jquery website into a single page angular app. However I have written a lot of code with jquery already so only intend to swap the php for angular in regards to the routing etc.
One problem I have come across that I can't figure out is that the jquery click events I have been using up until the convert have stopped working. If change the code to make it fire from an ng-click instead it will work, also if I call the function from the console. jquery is working, I put some jquery inside the mentioned function and it worked fine.
<!doctype html>
<html ng-app="myApp">
<head>
<link href="css/header.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.2/angularfire.min.js"></script>
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/header.js'></script>
<script type='text/javascript' src='main.js'></script>
</head>
<header-page></header-page>
main.js:
var mainApp = angular.module('myApp', ['firebase', 'headerPage']);
mainApp.directive('headerPage', function(){
return{
restrict: 'E',
templateUrl: 'html/header.html'
}
});
header.js
(function() {
var app = angular.module('headerPage', ['firebase']);
app.controller("headController", ['$http', '$firebase', '$scope', '$filter',
function($http, $firebase, $scope, $filter) {
//most of the code
}
]);
})();
$("#myElement").on("click", function() {
console.log("clicked");
});
The reason is because, when you bind the event to the element #myElement the element does not exist yet. Since that element is being rendered as a part of the directive template you would need to move the bind handler inside the directive link function. Well, you could technically use event delegation to solve the issue but it is just another hack upon hack. Best bet would be to use ng-click itself on the element (Which you already said you have tried out).
这篇关于jQuery的单击事件不与AngularJS工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
