How to bind an event for the elements HTML in angularjs

[biloki]

Hello,

I'm beginner of Angularjs. Normally by jquery, to bind an event for the HTML element, I do like this:

$( "#foo" ).bind( "click", function() {  

alert( "User clicked on 'foo.'" );

});

I'm using Angular in my project, so how to bind the event to the element like jquery in angular ? 

Anyone can help me

Thank you

[Kijana Woodard]

http://docs.angularjs.org/guide/concepts

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[biloki]

What do you mean ? I know: to add event click on an element, I add directly event on element, for ex:

<div id="div1" ng-click="clickFunction()"></div>

But it's not dynamic, I find the dynamic way like jquery like:

$("#div1").bind('click',function(){})

$(".button").bind('click',function(){})

So is there any way to do that in angularjs ?

[Tony pee]

By 'dynamic' you mean that you can do it on a selector link '.myClass' for all 'types' of button. 

Otherwise your example on the id is just as static (hopefully there is only 1 element with that id) 

Its not really the right way of thinking i feel, but you *could* look at creating a directive that would assign certain selectors to handlers - and this would just use jquery.

eg:  <div bind-to-selector="{ '.someting':handler() }"  

but you probably dont want to go down that path. sounds confusing.

--

Tony Polinelli

[biloki]

Yes, I want to do it on the class or id of div dynamically. When we works on projects javascript. We have a designer who do the file html and developer writes javascript. I don't want the designer adds direct ng-click, ng-change directly on the element html, developer will define in file js like I did in jquery: $('.okButton').bind('click',function)... 

So I want to do the similar by angular. So angular can do that ? Or I have to do that by jquery ?

[Kijana Woodard]

Why use angular like jquery? Why not use angular like angular....or use jquery.

https://groups.google.com/forum/#!msg/angular/kqZDVSUlkd0/sge6KsaaKQAJ

[biloki]

So just simple question: in angular, how do you bind event click on class with the name is classButton ?

[Brian Tan]

I'd like to know the answer to this as well.

I'm working on a charting application using highcharts. I managed to find a directive for highcharts that I like, but I need to bind a function to the click event for every data point.

[Kijana Woodard]

Wouldn't you do that in the directive?

[biloki]

But for the simple button, you need to create directive too ? Is there any way simpler ?

[Kijana Woodard]

I'm new to angular as well. I suppose you are trying to bridge what you know in order to learn something new.

My approach has been to dump what I know and learn the idioms of angular first. Ymmv.

So I would put ng-click on the button until I understood what angular has to offer.

I would use scm to merge my changes with the html dev if they can't/won't so angular.

Fwiw, I would never have a class named classButton.

[Kijana Woodard]

You don't need a directive for a button. You just need an html button and add the angular attribute...or am I misunderstanding something fundamental about your problem?

[biloki]

classButton is just an example that I name. You can't add ng-click for all buttons, it's too long. It has to have a solution dynamic like jquery

[biloki]

For example you have 50 button that have class classButton, what will you do to listen click on them ?

[Kijana Woodard]

On a single view? Then probably a directive, but I'll defer to someone with more angular experience.

[Cuneyt Ozen]

50 buttons on one page... I assume you plan to display a table with 50 rows. In that case you can use ng-click with ng-repeat. You can find many examples if you google it.

[ThomasBurleson]

In jQuery:

 

<div id="foo> </div>

 

<script> 

$( "#foo" ).bind( "click", function() {  

alert( "User clicked on 'foo.'" );

});

</script> 

In Angular:

<div id="cntr" ng-controller="fooController as myCtrl">

    <div id="foo" ng-click="myCtrl.selectFoo()" > </div> 

</div>

where the FooController manages all interactions. 

• ng-controller is an AngularJS Directive that defines the scope of FooController to the DIV "cntr" and all its content
  
• ng-Click is an AngularJS `attribute` directive that knows how to bind a `click` event listener to the `foo` DOM element and then proxies the click handler to invoke the expression: myCtrl.selectFoo().

This approach 

• Separates firewalls DOM UI from business logic in Controllers, Services, and Models
  
• Uses Directives to modify or enhance DOM elements using databinding as sources to update the DOM and evaluated expressions to update the business layers.
  

As you can see, AngularJS is a very different perspective [from jQuery] on how to interact with the DOM elements. 

Hope this helps provide some clarity.