trigger event and DOM manipulation like jQuery in angular

Question

jQuery

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

$('.box').bind('mousedown', function(){
    alert('box class clicked');
});

angular

<div ng-app="myApp" >
    <div data-ng-controller="myCtrl">
        <div ng-click="boxClick()" class="box"></div>
        <div ng-click="boxClick()"  class="box"></div>
        <div ng-click="boxClick()"  class="box"></div>
    </div>
</div>


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.boxClick = function(){
        alert('box class clicked');
    }
});

Now I am learning AngularJS, if we see this, short and crispy will be jQuery, for a single click event we are writing these much of line code in AngularJS, can anyone help me to write short as much as jQuery, how to select DOM element in AngularJS like jQuery, I am using ng-click to trigger click event in AngularJS, without that can I able to trigger click event in script tag itself. Thanks for replies in advance

http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1 — Deblaton Jean-Philippe, Apr 22 '15 at 10:51
If you're asking whether you can catch a `click` event without using `ng-click`, the answer is yes, but why would you want to do that? — Huey, Apr 22 '15 at 10:51
Internally angular uses light version of `jQuery` called `jqLite`. So, DOM selection in angular can be done using `jqLite` - [More Info](https://docs.angularjs.org/api/ng/function/angular.element) — Vigneswaran Marimuthu, Apr 22 '15 at 10:52
@Selva, I strongly suggest you check out Deblaton's link. Directives are a core feature and without them I'm not entirely sure why you'd want to use Angular. — Huey, Apr 22 '15 at 10:55
thanks to all replies, I asked this question because need to follow some standard way.. — Selva, Apr 22 '15 at 10:58

Ramesh Rajendran · Answer 1 · 2015-04-22T11:16:20.400

2

You can do it by using directive. this is a standard way in angularjs for this kind of situation.

The sample look like

 var app = angular.module('myApp', []);
    app.directive('myDomDirective', function () {
        return {
            link: function ($scope, element, attrs) {
                element.bind('click', function () {
                   alert('You clicked me!');
                });
                element.bind('mouseenter', function () {
                    alert('You mouse entered me!');
                });
                element.bind('mouseleave', function () {
                     alert('You mouse leaved me!');
                });
            }
        };
    });
    app.controller('myCtrl', function($scope) {
     // do what you want like service calls and binding
   });

then call the directives in your any tag

<div ng-app="myApp" >
    <div data-ng-controller="myCtrl">
        <div my-dom-directive class="box"></div>
        <div my-dom-directive  class="box"></div>
        <div my-dom-directive  class="box"></div>
    </div>
</div>

Please take a look at this document for more details

edited Apr 22 '15 at 11:16

answered Apr 22 '15 at 10:58

Ramesh Rajendran

37,412
45
153
234

if i use above code getting error Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=myCtrl&p1=not%20a%20function%2C%20got%20undefined at Error (native) – Selva Apr 22 '15 at 11:08
You need to add this line `app.controller('myCtrl', function($scope) {` my code have missed assigning controller – Ramesh Rajendran Apr 22 '15 at 11:11
can u please update the answer, i checked but now no error, but no event triggered – Selva Apr 22 '15 at 11:13
can u please update answer with working code, bcoz will help all and also me – Selva Apr 22 '15 at 11:15
Yeah, please tell me !! – Ramesh Rajendran Apr 22 '15 at 11:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/75931/discussion-between-selva-and-ramesh-rajendran). – Selva Apr 22 '15 at 11:21

Jai · Answer 2 · 2015-04-22T11:33:30.693

Some of the things i want you to notice that when you are working on DOM objects then it is better to do all the stuff in angular directives. As suggested in the answer.

i have created a demo and used this way:

<div ng-app="myApp" >
   <div data-ng-controller="myCtrl">
      <div ng-btn class="box">Btn1</div>
      <div ng-btn  class="box">Btn2</div>
      <div ng-btn  class="box">Btn3</div>
   </div>
</div>

and controller in app.js:

app.controller('myCtrl', function($scope) {
  $scope.boxClick = function(){ alert('clicked'); };
});

and directive in the app.js:

app.directive('ngBtn', function(){
  return {
     link:function(scope, element, attrs){
          angular.element(element).on('click', scope.boxClick);
     }
  };
});

Check this sample demo at plunkr

In this answer you can see we have a controller myCtrl in the js and function boxClick is in the $scope of current controller, which alerts a message.

Now if you see the markup you can see a directive named ng-btn which we have used in the directive with the camelCase naming convention in angular with ngBtn in the module.

Now in the directive you can see it returns an object which links to a callback function with three params (scope, element, attrs), where scope is the current controller's scope, element is the one which has the ng-btn attribute. Now using jqLite in the angular.element() you can bind the event on the element and you can see the message poping out.

Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/76062/discussion-on-answer-by-jai-trigger-event-and-dom-manipulation-like-jquery-in-an). — Taryn, Apr 23 '15 at 13:22

trigger event and DOM manipulation like jQuery in angular

2 Answers2

Check this sample demo at plunkr