首先你应该看看这篇"Thinking in AngularJS" if I have a jQuery background? 的帖子，它将帮助你理解使用AngularJS 的重要性。大多数来自jQuery 的用户并不真正了解 JavaScript 及其异步行为的工作原理。由于简单的 DOM 操作，jQuery 主要是同步执行的。这不是将jQuery与AngularJS混合的好方法，因为jQuery操纵DOM。更重要的是 -> 没有必要将 jQuery 与 AngularJS 混合使用。
使用jQuery 和AngularJS 可能会破坏AngularJS。另一方面，jQuery 很难使用，而它主要使用 DOM 操作和绑定。在您的情况下，数据绑定失败，因为 DOM 是由 AngularJS 生成的。这是主要问题。当您将其与jQuery 绑定时，您想与on('taphold') 绑定的p 元素在DOM 中不可用。这就是你的绑定失败的原因。
请看一下这个Fiddle。它重现了您的问题。提示，我将taphold 事件替换为click 以使其在非移动设备上工作，但这没关系，绑定/问题是相同的。所以你可以在document is ready事件之后点击删除p完成渲染。无法删除使用 AngularJS 渲染的 p 元素，因为 jQuery 数据绑定失败/早在元素出现之前很久/或者 $scope 已更改并且由于 E2E 数据绑定已被 AngularJS 重新渲染。
以下示例向您展示如何在 AngularJS 中绑定事件。此事件称为 longPress，与 taphold 几乎相同。它应该适用于移动和桌面应用程序。
查看
<div ng-controller="MyCtrl">
<div ng-repeat="image in images">
<p ng-show="image.show" on-long-press="image.show = false">
{{image.url}}
</p>
</div>
</div>
AngularJS 应用程序
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.images = [{
show: true,
url: 'some/url.jpg'
},{
show: true,
url: 'some/url.jpg'
},{
show: true,
url: 'some/url.jpg'
}];
}]);
// taken from https://github.com/puneethrai/angular-long-press/blob/master/dist/angular-long-press.js
myApp.directive('onLongPress', ['$parse', '$timeout', function ($parse, $timeout) {
return {
restrict: 'A',
link: function ($scope, $elm, $attrs) {
var timer;
var timerDuration = (!isNaN($attrs.longPressDuration) && parseInt($attrs.longPressDuration)) || 600;
// By default we prevent long press when user scrolls
var preventLongPressOnScroll = ($attrs.preventOnscrolling ? $attrs.preventOnscrolling === 'true' : true)
// Variable used to prevent long press while scrolling
var touchStartY;
var touchStartX;
var MAX_DELTA = 15;
// Bind touch, mouse and click event
$elm.bind('touchstart', onEnter);
$elm.bind('touchend', onExit);
$elm.bind('mousedown', onEnter);
$elm.bind('mouseup', onExit);
$elm.bind('click', onClick);
// For windows mobile browser
$elm.bind('pointerdown', onEnter);
$elm.bind('pointerup', onExit);
if (preventLongPressOnScroll) {
// Bind touchmove so that we prevent long press when user is scrolling
$elm.bind('touchmove', onMove);
}
function onEnter(evt) {
var functionHandler = $parse($attrs.onLongPress);
// For tracking scrolling
if ((evt.originalEvent || evt).touches) {
touchStartY = (evt.originalEvent || evt).touches[0].screenY;
touchStartX = (evt.originalEvent || evt).touches[0].screenX;
}
//Cancel existing timer
$timeout.cancel(timer);
//To handle click event properly
$scope.longPressSent = false;
// We'll set a timeout for 600 ms for a long press
timer = $timeout(function () {
$scope.longPressSent = true;
// If the touchend event hasn't fired,
// apply the function given in on the element's on-long-press attribute
$scope.$apply(function () {
functionHandler($scope, {
$event: evt
});
});
}, timerDuration);
}
function onExit(evt) {
var functionHandler = $parse($attrs.onTouchEnd);
// Prevent the onLongPress event from firing
$timeout.cancel(timer);
// If there is an on-touch-end function attached to this element, apply it
if ($attrs.onTouchEnd) {
$scope.$apply(function () {
functionHandler($scope, {
$event: evt
});
});
}
}
function onClick(evt) {
//If long press is handled then prevent click
if ($scope.longPressSent && (!$attrs.preventClick || $attrs.preventClick === "true")) {
evt.preventDefault();
evt.stopPropagation();
evt.stopImmediatePropagation();
}
}
function onMove(evt) {
var yPosition = (evt.originalEvent || evt).touches[0].screenY;
var xPosition = (evt.originalEvent || evt).touches[0].screenX;
// If we scrolled, prevent long presses
if (touchStartY !== undefined && touchStartX !== undefined &&
(Math.abs(yPosition - touchStartY) > MAX_DELTA) || Math.abs(xPosition - touchStartX) > MAX_DELTA) {
$timeout.cancel(timer);
}
}
}
};
}]);