AngularJS directive matching

Question

Assume we have this JS code:

.directive('myCustomer', function() {
 return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});

and html code:

<div my-customer></div>

Can anyone tell me why we are matching directive with div using my-customer while we don't have this name anywhere in the code?

above code is from hereDeveloper Guide / Directives

This is a common gotcha with everyone who is new to angular. HTML is not case-sensitive and camelCase is the norm in JS since using - in a variable name means you can't reference it like someObj.my-customer so there is this normalization process between the two. — shaunhusain
– shaunhusain, Commented Jan 26, 2015 at 7:40

huan feng · Accepted Answer · 2015-01-26 07:38:27Z

3

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

https://docs.angularjs.org/guide/directive#normalized

answered Jan 26, 2015 at 7:38

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shaunhusain Over a year ago

docs.angularjs.org/guide/directive#matching-directives <-- this section in that page also explains about how directives are matched regarding stripping the x- or data- prefixes.

huan feng Over a year ago

@shaunhusain Yes, you are correct! Thanks for improving the answer

Collectives™ on Stack Overflow

AngularJS directive matching

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related