AngularJS, ng-click vs ng:click vs ngClick

Question

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?

Answer 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.

Answer 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.