AngularJS, ng-click vs ng: click vs ngClick

Question

I am learning AngularJS and I am a little confused by the different directive rules that I come across.

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

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

sometimes i see (ng dash click):

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

and in Angular docs, directives are displayed as " ngClick " (camel line without a dash or colon). Also, in some places I saw: data-ng-click

What is the difference between these various forms?

Answer 1

It makes no difference, it all depends on your programming style. ng-click , I think, by far the most popular style.

When you create your own directive, you should always transfer it to javascript, and then when you put it on an element in your html, you should use the lowercase version, shared by your favorite taste. I always do it like this:

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

and then:

 <div test-directive></div> 

In angular docs :

Best practice: Prefer using a dash-delimited format (e.g. ng-bind for ngBind). If you want to use the HTML validation tool, you can instead use the version with the data prefix (for example, data-ng-bind for ngBind). The other forms shown above are accepted for hereditary reasons, but we advise you to avoid them.

Answer 2

ng-click , ng:click and ngClick all the same for AngularJS, you can use the one you prefer, although I think ng-click is the way you usually see it being used.
data- is an HTML5 prefix that you can use for embedded user data , this helps to ensure that your HTML passes validation and prevents some IDE files from showing errors for unknown attributes.