Angularjs handle click action on element

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?

[`ng-click`](https://docs.angularjs.org/api/ng/directive/ngClick) [`ng-dblclick`](https://docs.angularjs.org/api/ng/directive/ngDblclick) — Serge K., Sep 19 '17 at 07:41
Here, check this out: https://stackoverflow.com/questions/20444409/handling-ng-click-and-ng-dblclick-on-the-same-element-with-angularjs — Emir Maljanovic, Sep 19 '17 at 07:41
Where is Angularjs code? Am not seeing any angular code from your code. — Ramesh Rajendran, Sep 19 '17 at 07:41
@EmirMaljanovic I have trying that solution but I'm confuse, should I using sglclick="singleClick()" ng-dblClick="doubleClick()" this on every span element? I want to have a single trigger click like $('#text span'), how to do this? — Spella, Sep 19 '17 at 07:47

score 2 · Answer 1 · answered Sep 19 '17 at 07:48

2

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

answered Sep 19 '17 at 07:48

bukke hari prasad

168
7

I want to have a single trigger action like $('#text span'), if using directive should I add ngClick and ngDblclick on every span element? – Spella Sep 19 '17 at 07:51

score 2 · Accepted Answer · answered Sep 19 '17 at 08:19

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>

answered Sep 19 '17 at 08:19

Thusitha

3,393
3
21
33

Yup it's working! Now I think in angular way But I have one more question, I have function app.factory('Parser') and it will return something like this Word (just like your example span html) but why the click events not working? should I prepare this span on html and then doing $scope.data = [] ? I need this parser to arrange word per line. What should I do? I'm soo confuse :( – Spella Sep 19 '17 at 08:44
1

Yes. you should prepare the span inside the HTML. Because if you want to dynamically add the "Word" to the DOM you have to $compile the HTML code again with Angular to init all the ng-click events. https://stackoverflow.com/questions/34498558/how-to-add-ng-click-handler-dynamically – Thusitha Sep 19 '17 at 08:52
thank you for this $compile hint. I see this http://jsfiddle.net/NWZZE/6/ and now I know what should I do. – Spella Sep 19 '17 at 09:01
@Spella If you think my answer helped you, you can mark it as the correct answer :) – Thusitha Sep 19 '17 at 09:12
OMG it's working now I combine this https://stackoverflow.com/questions/17417607/angular-ng-bind-html-and-directive-within-it and your span html.. once again thank you – Spella Sep 19 '17 at 09:24

score 0 · Answer 3 · answered Sep 19 '17 at 08:45

0

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>

answered Sep 19 '17 at 08:45

Marco

741
3
18

Angularjs handle click action on element

3 Answers3