How to use $event only for parent element in Angular JS?

Question

I have HTML code with ng-click event:

<div class="btn share" ng-click="do($event)">
   <span">1</span>
</div>

Angular JS:

$scope.do = function (event) {
  var target = angular.element(event.target);
  var parsed = parseInt(target.find('span').text(), 10);
}

When I click to element div or child element span is called event do(). But if I click on span my counter inside span is not increment. Only by clicking parent element div. How I can set same $event for div and span elements?

<span">1</span> is that " a typo or your error?

Joe Lloyd
– Joe Lloyd

2015-09-05 09:10:53 +00:00
Commented Sep 5, 2015 at 9:10 — Joe Lloyd
– Joe Lloyd, Commented Sep 5, 2015 at 9:10

Pankaj Parkar · Accepted Answer · 2015-09-05 09:36:59Z

4

I would recommend to work with scope bindings instead of DOM textContent:

<div class="btn share" ng-click="do()">
   <span>{{count}}</span>
</div>

and in controller

$scope.count = 0;
$scope.do = function () {
    $scope.count++;
};

If you however still want to know why it failed with your approach, it's because you need to use currentTarget, not just target:

angular.module('demo', []).controller('MainCtrl', function($scope) {
    $scope.do = function(event) {
        var target = angular.element(event.currentTarget);
        var parsed = parseInt(target.find('span').text(), 10);
        target.find('span').text(parsed + 1);
    };

});

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>

<div ng-app="demo" ng-controller="MainCtrl" class="btn share" ng-click="do($event)">
    <span>1</span>
</div>

But don't do this, controller should not work with DOM at all, this is not what controllers are for.

edited Sep 5, 2015 at 9:36

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Sep 5, 2015 at 9:14

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

JB Nizet · Accepted Answer · 2015-09-05 09:16:12Z

1

You're doing it the wrong way. Angular is not jQuery. You shouldn't do any DOM manipulation in the controller. The view should be generated based on the model, and not vice-versa.

The code should be

<div class="btn share" ng-click="do()">
    <span>{{ counter }}</span>
</div>

and in the controller:

$scope.counter = 1;
$scope.do = function() {
    doSomethingWithCounter($scope.counter);
}

answered Sep 5, 2015 at 9:16

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Comments

Joe Lloyd · Accepted Answer · 2015-11-08 08:30:17Z

1

Have you tried adding the same click event to your span also?

Like this

<span ng-click="do($event)"> 1 </span>

edited Nov 8, 2015 at 8:30

answered Sep 5, 2015 at 9:16

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

Collectives™ on Stack Overflow

How to use $event only for parent element in Angular JS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related