Adding click event angularjs way without jquery

Question

How do i bind new event to DOM from controller in angular dynamically.

For html

<a href= "section" class="mdcl" />

say in jquery i will add click event

$(".mdcl").on('click',function(){
//Do something
});

How do i do the same thing in angular js dynamically

usually we add in DOM which is straight forward

<a href= "section" class="mdcl" ng-click="functon()"/>

but if i don't have the control over DOM say content is coming from some where else and i need to add click event based on the class. how do i do this angular way?

Apologize if am repeating questions..i didn't come across similar question..

Thanks

You can keep the same function and change your class dynamically using ng-class — Vivz
– Vivz, Commented Aug 23, 2017 at 5:40
@Rahul my content come via service and i inject it to my partial view — Peru
– Peru, Commented Aug 23, 2017 at 5:41
if you have acces to the code of the service witch render the html .... yo can edit and add the ng-click directive before send. — Jesus Carrasco
– Jesus Carrasco, Commented Aug 23, 2017 at 5:41
@Vivz i dont have click event at all in the DOM..can i create click in controller? — Peru
– Peru, Commented Aug 23, 2017 at 5:42

Aravind Reddy · Accepted Answer · 2017-08-23 05:54:26Z

2

Good question. It will be helpful for them who have constraints in writing code like dom should not be changed and only angularjs should be used. Here is my answer

similar to jquery you can use querySelecrtor in angular like in the controller you can write the following code

angular.element(document.querySelector('.mdcl')).bind('click' , function(){
//Do Something here
});

similarly you can bind the scroll event or any dom events in this way and you can use querySelector for selecting the DOM elements for example if you wan to select an id than a class you can replace querySelector('#mdcl')

here you can learn more about angular element

answered Aug 23, 2017 at 5:54

Aravind Reddy

7677 silver badges21 bronze badges

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

2 Comments

georgeawg Over a year ago

With the AngularJS framework, avoid doing DOM manipulation in controllers. DOM manipulation should be encapsulated in a custom directive. If a third-party library brings in DOM content from "somewhere else", that operation should itself be encapsulated in a custom directive and events should be bound and connected to controllers with expression "&" binding attributes.

Aravind Reddy Over a year ago

yes i do know that but in the question he didnt explain the complete usage so i just said controller

Collectives™ on Stack Overflow

Adding click event angularjs way without jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related