AngularJs dynamic Event handler without using directive

Question

<body ng-controller="MyController">    
    <mydirective></mydirective>
</body>

Is there any way in AngularJS to attach dynamic event without using directive tag because it may need to add additional tag in html.

<!DOCTYPE html>
<html ng-app="appname">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>

<body ng-controller="MyController">    
    <mydirective></mydirective>
</body>

<script>

var app = angular.module('appname', []);
app.controller('MyController', function($scope){

});
app.directive('mydirective', function(){
  return {
    restrict: 'E',    
    link: function(scope, elem, attrs){
      angular.element(document).bind('mousedown', function(){
        console.log('clicked on document');
      });
    }
  }
});

</script>

</html>

Can you be more specific? where do u need to add additional tags? — Imab Asghar
– Imab Asghar, Commented Sep 17, 2015 at 8:57
@ImabAsghar, the additional tags what i mean is <mydirective></mydirective>, because whenever I use app.directive, my HTML file must already have respecitve directive name, Isn't it? — Frank Myat Thu
– Frank Myat Thu, Commented Sep 17, 2015 at 9:02

Pasan Ratnayake · Accepted Answer · 2015-09-17 10:16:31Z

2

Sure you can. Take a look at the following JSFiddle. However, always and always remember to unbind events as well, otherwise it might lead to memory leaks and other unwanted scenarios.

var buttonElement = angular.element('#myButton');
buttonElement.bind('click', function (e) {
    alert('This is a code bound event');
});

Also, using directives such as 'ng-click', ng-mouseover' is always advised, since these are well-developed and well-tested by thousands and thousands of developers. It will help you to develop robust applications

JSFiddle: Bind events through code << Updated the fiddle based on OP's comments

edited Sep 17, 2015 at 10:16

answered Sep 17, 2015 at 9:37

Pasan Ratnayake

4954 silver badges10 bronze badges

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

2 Comments

Frank Myat Thu Over a year ago

Thank you for your help, Sorry if I make you confuse regarding to my question, Let say that My HTML has no control (button, checkbox ...) at all. But I want to fire mouse button click event wherever user click within my page.

Pasan Ratnayake Over a year ago

Oh! it's the same approach nonetheless, you have to change the target element to $document. See the updated JSFiddle :)

Collectives™ on Stack Overflow

AngularJs dynamic Event handler without using directive

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related