Question

我正在使用Ionic和Angular创建一个应用程序。我正在尝试使用Ionic的触摸事件创建自定义突出显示功能。现在，我能够将字符串拆分为由空格分隔的字符串数组，并在单独的span元素中显示每个单词。我现在要做的是将“突出显示”类应用于用户触摸的第一个span元素，用户触摸的最后一个span元素以及介于两者之间的每个span元素。

我计划通过使用拖动事件来完成此操作，只要用户在屏幕上移动手指就会触发该事件。我想保存触摸的第一个跨度的ID，不断更新最后触及的跨度，并将突出显示类应用于两者之间的每个跨度元素。

当我在Ionic Serve（又名网页浏览器）上运行我的代码时，似乎工作正常。每个拖动事件都在注册，当前范围的ID保存到我的变量“firstWordID”。同样，我的变量“lastWordID”被保存到每个连续拖动事件生成的当前span元素ID。例如，当我尝试突出显示第1到第4个单词时，这就是我在console.log“firstWordID”和“lastWordID”

时得到的结果。

在Ionic Serve（网络浏览器）中：

The first word with ID 0 has been tagged  controllers.js:104
The last word with ID 0 has been tagged   controllers.js:104 
The last word with ID 1 has been tagged   controllers.js:104 
The last word with ID 2 has been tagged   controllers.js:104 
The last word with ID 3 has been tagged   controllers.js:104 
The last word with ID 4 has been tagged   controllers.js:104

但每当我在iOS模拟器或手机上的Ionic View中运行它时，拖动事件似乎都没有注册。日志中没有显示任何内容。我尝试了几种方法，使用touchstart，touchmove和touchend，以及拖动和释放，有时事件会不断发生。但即使这样，e.srcElement.id也没有获得最新的跨度ID - “firstWordID”和“lastWordID”都始终停留在第一个。

我在这方面有点新鲜，并且已经持续了好几个小时。任何建议都会非常感激。

我的HTML：

<ion-content scroll="false"> 
    <div detect-gestures gesture-type="drag">
      <span ng-class="{highlighted: word.isHighlighted}" ng-attr-id="{{word.id}}" ng-repeat="word in words track by $index"> {{word.text}} </span>
    </div>
</ion-content>

我的CSS：

.highlighted {
    background-color: yellow;
}
.normal {
    color:#000000;
}

我的Javascript：

angular.module('leder.controllers', [])

.directive('detectGestures', function($ionicGesture) {
  return {
    restrict :  'A',

    link : function(scope, elem, attrs) {
      $ionicGesture.on('drag', scope.onDrag, elem);
      $ionicGesture.on('release', scope.onRelease, elem);
    }
  }
})

.controller('AppCtrl', function($scope, $ionicModal, $timeout, Notes, $stateParams) {

  //set two variables for first and last word IDs
  var firstWordID = null;
  var lastWordID = null;


 //function to set first and last word IDs
  $scope.onDrag = function dragTest(e) {
    e.preventDefault(); 

    //get ID of current span
    var htmlID = $scope.getHTMLObject(e);

    //if firstWordID doesn't exist yet, save it to the current span
    if (!firstWordID) {
      firstWordID = htmlID;
      console.log("The first word with ID " + firstWordID + " has been tagged");
    }
    //save and continuously update lastWordID with current span
    lastWordID = htmlID;
    console.log("The last word with ID " + lastWordID + " has been tagged");

    //iterate through object array.
    for (var i = 0; i < $scope.words.length; i++){
      //if current element is greater than first word ID and less than last word ID, then change isHighlighted to true
      if ($scope.words[i].id >= firstWordID && $scope.words[i].id <= lastWordID){
        $scope.words[i].isHighlighted = true;
      } 
    };

  };

  //function to get ID of current span
  $scope.getHTMLObject = function htmlTest(e){
    var htmlID = e.srcElement.id;
    return htmlID;
  }
})

离子拖动和触摸事件不返回当前DOM元素;卡在第一个元素上

0 个答案: