将 Ionic `onHold` 和 Angularjs `ng-click` 组合到 select 元素

Question

在我当前的 ionic App 中，我有一些盒子，我想 select 它们完全以 select 的形式在 Telegram 中聊天，那意思是：

1. 首先我用 OnHold 手势启动 select 框， 这个工作正常。

2. 之后我想通过 click select 或 deselect 框他们，这是行不通的

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>

JS

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

现在，该怎么做？提前致谢

Answer 1

来自 AngularJS 文档：

Directives that want to modify the DOM typically use the link option to register DOM listeners as well as update the DOM. It is executed after the template has been cloned and is where directive logic will be put.

因此，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);

请注意，在第一个 hold 事件之后，$rootScope.selected 将保持 true，因此录音也将充当 select。不知道这是否是您要寻找的功能。

这是更新后的 fiddle 示例：http://jsfiddle.net/browomk2/2/

将 Ionic `onHold` 和 Angularjs `ng-click` 组合到 select 元素

Combine Ionic `onHold` and Angularjs `ng-click` to select element

angularjs

cordova

ionic-framework

angular-directive