AngularJS处理元素上的点击动作

Question

I'm new in angularjs. I have something like this with 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> 

I want to handle single click and double click event. How to do that with angularjs?

Answer 1

use ng-click and ng-dblclick on your span elements

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

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

Answer 2

Your implementation is not suited for direct AngularJS migration. You have to change your HTML code a bit to populate from an array and add a single ng-dblclick to the span .

This is just an example to show you how to think in Angular way.

 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> 

Answer 3

Use ngClick, ngDblclick and ngRepeat in html

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