I'm still learning Angularjs, I want to bind events on a dynamic template when and where should I put this the Angularjs way? Aside from directly putting it in the template ng-click

//template
<div ng-repeat="person in people"><span class="person" id="{{person.id}}" >{{person.name}}</span></div>

//Jquery version
$('.person').click(function(){
  //get attribute value
  //do stuff
});

//Angular version - where should I put this
angular.element('.person').on('click', function() {
  //get attribute value
  //do stuff
});

I'm still learning Angularjs, I want to bind events on a dynamic template when and where should I put this the Angularjs way? Aside from directly putting it in the template ng-click

//template
<div ng-repeat="person in people"><span class="person" id="{{person.id}}" >{{person.name}}</span></div>

//Jquery version
$('.person').click(function(){
  //get attribute value
  //do stuff
});

//Angular version - where should I put this
angular.element('.person').on('click', function() {
  //get attribute value
  //do stuff
});

• javascript
• angularjs
• event-handling

• 1 Why don't you want to put in on the ng-click? If <span> that is displaying the person has behavior, you could make it its own directive with its own controller. Then use ng-click to call a method inside the directive. – mcgraphix Commented Dec 1, 2015 at 23:15
• my concern is not about using ng-click, I want to know a different way of binding events aside from that approach. In my example I show a way to do it in Jquery, now I want to know an equivalent way in AngularJs – helloworld2013 Commented Dec 1, 2015 at 23:25
• 1 When moving from jQuery to angular, you want to think about it in the Angular way rather than try to port your jQuery way of thinking to your Angular app. In general, you shouldn't access the DOM from your javascript code. While doing that kind of thing is ok in a directive, the preferred approach would be to use ng-click and call a method on your directive's controller or scope – mcgraphix Commented Dec 1, 2015 at 23:29
• I think I get what you're saying now mcgraphix. Thanks for the idea – helloworld2013 Commented Dec 1, 2015 at 23:35
• How about if there are process that I need to associate the event to a Class, how can I achieve this in Angularjs using my custom directive? – helloworld2013 Commented Dec 1, 2015 at 23:36

2 Answers 2

In AngularJS you should care about DOM only in visual ponents (directives). Nowhere else you should know anything about DOM - which elements there are, how they are posed etc. That's one of main coolest things in Angular - you can change template without changing JS.

So this separation is key point here. In AngularJS you should put everything connected to DOM in template directly (attach event listeners, bind to model, etc).

However, inside of Directives you can bind and unbind event listeners to DOM elements:

angular.directive('test', function() {
   return {
      restrict:'E',
      link: function(scope, element,attr) {
          element.on('click', function() { console.log(attr.value); })
      }
   }
}

However I would like to advice to consider using standard directives (ng-click) to handle standard events and bind to controller's methods.

prepared a codepen for you. hope that answers your question

Codepen

HTML:

<div ng-repeat="person in people">
<span class="person" id="{{person.id}}" click>{{person.name}}</span></div>

JS:

app.directive('click', function () {
    return {
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                alert('Clicked on ID : '+ attrs.id);
            });
        },
    };
});