AngularJS, ng-click vs ng:click vs ngClick

All we need is an easy explanation of the problem, so here it is.

I’m learning AngularJS, and I’m a little confused by the different usages of directives that I’m coming across.

For example, sometimes I see something like (ng colon click):

<tr ng:click="..." ...>

sometimes I see (ng dash click):

<tr ng-click="..." ...>

and in the Angular docs, directives are shown as “ngClick” (camelcase with no dash or colon). Additionally, in some places, I’ve seen: data-ng-click

What’s the difference between these different forms?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

No difference, it all depends on your style of programming. ng-click, I think, is by far the most popular style.

When you’re creating your own directive, you should always camelcase it in the javascript, and then when you put it on an element in your html you should use the lowercase version separated by your favorite flavor. I always do it like so:

angular.module('Test', []).directive('testDirective', function(){

});

and then:

<div test-directive></div>

From the angular docs:

Best Practice: Prefer using the dash-delimited format (e.g. ng-bind
for ngBind). If you want to use an HTML validating tool, you can
instead use the data-prefixed version (e.g. data-ng-bind for ngBind).
The other forms shown above are accepted for legacy reasons but we
advise you to avoid them.

Method 2

ng-click, ng:click and ngClick are all the same for AngularJS, you can use whichever one you prefer, though I think ng-click is how you’ll usually see it being used.
data- is an HTML5 prefix you can use to embed custom data, it helps making sure your HTML passes validation and keeping some IDEs from showing errors for unknown attributes.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply