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

对你的span元素使用ng-click和ng-dblclick

https://docs.angularjs.org/api/ng/directive/ngClick

https://docs.angularjs.org/api/ng/directive/ngDblclick

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

在html中使用ngClick，ngDblclick和ngRepeat

<pre id="text">
<span ng-click="click(word)" ngDblclick="dblClikc(word)" ng-repeat="word in words" class="word"></span> 
</pre>

Angularjs处理元素上的单击操作

3 个答案: