Question

可能是我的代码看起来很愚蠢。由于我对AngularJS并不擅长，所以我愿意接受建议。我想要隐藏图像框并获取图像的ID。

<div data-role="page" id="pageone">
    <div data-role="main" class="ui-content">
        <div class="my-gallery" itemscope id="grid"   >
            <div ng-repeat="imageUrl in images" class="col-xs-3">
                <p>
                    <figure itemprop="associatedMedia">
                        <a href="{{imageUrl}}" name="thumb" id="{{pid[$index]}}" class="thumbnail" itemprop="contentUrl"  data-size="800x600">
                            <img src="" class="img-responsive" id="{{pid[$index]}}" ng-src="{{thumb[$index]}}" style="min-height:50px;height:50px;">
                        </a>
                    </figure>
                    <p>Tap and hold me!</p>
                </p>
            </div>
        </div>
    </div>
</div>

这里是隐藏和获取图像ID的js代码。

<script>
$(document).on("pagecreate","#pageone",function(){
  $("p").on("taphold",function(){
    $(this).hide();
  });                       
});
</script>

如果我使用上面的代码，那么它工作正常。

<div data-role="page" id="pageone">
    <div data-role="main" class="ui-content">
        <p>If you tap and hold me for one second, I will disappear.</p>
        <p>Tap and hold me!</p>
        <p>Tap and hold me too!</p>
    </div>
</div>

所以，基本上我想要实现的目标如下。用户可以点击任何图像然后触发事件以从服务器删除图像。我将为此执行HTTP请求，稍后它将隐藏该图像。

目前我甚至无法隐藏它。看起来点击保持事件没有触发。

我愿意接受建议，请告诉我实现这一目标的最佳方式。

Answer 1

首先，您应该看一下这篇文章"Thinking in AngularJS" if I have a jQuery background?，它将帮助您了解使用AngularJS的重要内容。来自jQuery的大多数用户都不了解JavaScript及其异步行为的工作原理。由于简单的DOM操作，jQuery主要是同步执行的。它不是将jQuery与AngularJS混合的好方法，因为jQuery操纵DOM。更重要的是 - ＆gt; 没有必要将jQuery与AngularJS混合使用。

使用jQuery和AngularJS可能会中断AngularJS。另一方面，jQuery很难使用，而它主要使用DOM操作和绑定。在您的情况下，数据绑定失败，因为DOM是由AngularJS生成的。这是主要问题。在您与p绑定时，您希望与on('taphold')绑定的jQuery元素在DOM中不可用。这就是你绑定失败的原因。

请查看此Fiddle。它再现了你的问题。提示，我将taphold事件替换为click以使其在非移动设备上运行，但这无关紧要，绑定/问题是相同的。因此，您可以在p事件后单击删除document is ready完成的渲染。使用AngularJS呈现的p元素无法删除，因为jQuery数据绑定失败/在元素出现之前很久/或$scope已更改并且由于E2E数据绑定而被AngularJS重新呈现。

以下示例说明如何绑定AngularJS中的事件。此事件称为longPress，与taphold几乎相同。它应该适用于移动和桌面应用程序。

Example Fiddle使用longPress指令：

视图

<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);
                }

            }
        }
    };
}]);

jQuery / AngularJS：点击保持不在AngularJS

1 个答案:

Example Fiddle使用longPress指令：

视图

AngularJS应用程序