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

Answer 1

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

Answer 2

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.