blindsnowmobile blindsnowmobile - 5 months ago 10
AngularJS Question

AngularJS, ng-click vs ng:click vs ngClick

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

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.

Comments