结合 Ionic `onHold` 和 Angularjs `ng-click` 来选择元素答案

【问题标题】：Combine Ionic `onHold` and Angularjs `ng-click` to select element结合 Ionic `onHold` 和 Angularjs `ng-click` 来选择元素
【发布时间】：2026-02-18 04:50:01
【问题描述】：

在我当前的 ionic 应用程序中，我有一些框，我想以 Telegram 中选择聊天的形式准确地选择它们，这意味着：

1. 首先我通过 OnHold 手势在 ionic 中启动选择框， 这工作正常。

2. 之后我想通过单击每个框来选择或取消选择框，这不起作用

There is JSFiddle

HTML

<ion-content>
  <div class="box" select-box>box 1</div>
  <div class="box" select-box>box 2</div>
  <div class="box" select-box>box 3</div>
</ion-content>

var app = angular.module('app', ['ionic']);
app.directive("selectBox", ["$ionicGesture", "$rootScope",
  function($ionicGesture, $rootScope) {
    return {
      scope: {},
      restrict: "A",
      link: function(scope, elem, attrs) {

          // onHold => start select box by `onHold` => working good
          $ionicGesture.on('hold', function() {
            elem.addClass("selected");
            $rootScope.startSelect = true; // to enable select box by click
          }, elem);

          // after start select box in `onHold` gesture => 
          // select box by click => not working
          if ($rootScope.startSelect) {
            elem.on("click", function() {
              if (elem.hasClass('selected')) {
                elem.removeClass("selected");
              } else {
                elem.addClass("selected");
              }
            });
          }

        } // link function

    } // return
  }
]); // directive

app.controller('MainCtrl', ["$scope", "$rootScope",
  function($scope, $rootScope) {
        $rootScope.startSelect = false;
  }
]);

CSS

.box {
  padding: 10px;
  margin: 15px;
  background: #FFF;
  width: 200px;
  margin: 15px auto;
}

.selected {
  background: red;
  color: #FFF;
}

现在，如何做到这一点？提前致谢

【问题讨论】：

标签： angularjs cordova ionic-framework angular-directive

【解决方案1】：

来自 AngularJS 文档：

想要修改 DOM 的指令通常使用链接选项来注册 DOM 侦听器以及更新 DOM。它在模板被克隆后执行，是放置指令逻辑的地方。

因此，link 在开始时只执行一次。您检查的部分也是如此：if ($rootScope.startSelect) {...}。您必须在另一个侦听器中检查此值是否为true，以便每次都执行它。您可以使用tap 手势，例如：

$ionicGesture.on('tap', function() {
  if ($rootScope.startSelect) {
    if (elem.hasClass('selected')) {
      elem.removeClass('selected');
    } else {
      elem.addClass('selected');
    }
  }
}, elem);

Notice that $rootScope.selected will remain true after the first hold event, so taping will act as a select too.不知道这是不是你要找的功能。

这是您的示例的更新小提琴：http://jsfiddle.net/browomk2/2/

【讨论】：