javascript - Angularjs 处理元素上的点击操作

Question

我是 angularjs 新手。我用 jquery 有类似的东西。

wordClick();

function wordClick() {
  var dblClick = false;
  $('#text span.word').on('click', function(){
    var that = this;
    setTimeout(function() {
      if(dblClick == false){
        console.log('single click event. word is "'+$(that).text()+'"');
      }
    }, 400)
  }).dblclick(function() {
    var that = this;
    dblClick = true;
    setTimeout(function(){
      dblClick = false;
      console.log('double click event. word is "'+$(that).text()+'"');
    }, 500)
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="text">
<span class="word">This</span> <span class="word">is</span> <span class="word">word</span> 
<span class="word">I</span> <span class="word">want</span> <span class="word">to</span> 
<span class="word">click</span> <span class="word">this</span> <span class="word">word</span> 
</pre>

我想处理单击和双击事件。如何使用 angularjs 做到这一点？

Answer 1

您的实现不适合直接 AngularJS 迁移。您必须稍微更改 HTML 代码才能从数组填充并将单个 ng-dblclick 添加到 span。

这只是一个向您展示如何以 Angular 方式思考的示例。

var app = angular.module("app", []);
app.controller("MainController", function($scope){

$scope.data = ["This", "is", "word", "I", "want", "to", "click"];

//Double click
$scope.shoutLoud = function(word){
  alert(word);
}

//Single click
$scope.shout = function(word){
  console.log(word);
}

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController">
    <span ng-click="shout(word)" ng-dblclick="shoutLoud(word)"
          ng-repeat="word in data" class="word">
          {{word}} 
    </span>
<div>