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?

Here, check this out: stackoverflow.com/questions/20444409/… — Emir Maljanovic
– Emir Maljanovic, Commented Sep 19, 2017 at 7:41
Where is Angularjs code? Am not seeing any angular code from your code. — Ramesh Rajendran
– Ramesh Rajendran, Commented Sep 19, 2017 at 7: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
– Spella, Commented Sep 19, 2017 at 7:47

Thusitha · Accepted Answer · 2017-09-19 08:19:06Z

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, 2017 at 8:19

Thusitha

3,5113 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Spella Over a year ago

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 <span ng-click="shout(word)">Word</span> (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 :(

Thusitha Over a year ago

Yes. you should prepare the span inside the HTML. Because if you want to dynamically add the "<span ng-click="shout(word)">Word</span>" to the DOM you have to $compile the HTML code again with Angular to init all the ng-click events. stackoverflow.com/questions/34498558/…

Spella Over a year ago

thank you for this $compile hint. I see this jsfiddle.net/NWZZE/6 and now I know what should I do.

Thusitha Over a year ago

@Spella If you think my answer helped you, you can mark it as the correct answer :)

Spella Over a year ago

OMG it's working now I combine this stackoverflow.com/questions/17417607/… and your span html.. once again thank you

bukke hari prasad · Accepted Answer · 2017-09-19 07:48:20Z

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, 2017 at 7:48

bukke hari prasad

1687 bronze badges

1 Comment

Spella Over a year ago

I want to have a single trigger action like $('#text span'), if using directive should I add ngClick and ngDblclick on every span element?

Marco · Accepted Answer · 2017-09-19 08:45:49Z

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, 2017 at 8:45

Marco

7613 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angularjs handle click action on element

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related