{"id":59806,"date":"2018-05-03T11:19:33","date_gmt":"2018-05-03T05:49:33","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59806"},"modified":"2024-04-12T14:20:46","modified_gmt":"2024-04-12T08:50:46","slug":"angular-directive-basics","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-directive-basics\/","title":{"rendered":"Angular Directive Basics"},"content":{"rendered":"

Angular Directive Basics<\/h1>\n

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.<\/p>\n

AngularJS comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for AngularJS to use. When AngularJS bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.<\/p>\n

Matching Directives<\/strong><\/p>\n

Before we can write a directive, we need to know how AngularJS’s HTML compiler determines when to use a given directive.<\/p>\n

Similar to the terminology used when an element matches a selector, we say an element matches a directive when the directive is part of its declaration.<\/p>\n

In the following example, we say that the <input> element matches the ngModel directive<\/p>\n

<input ng-model=”foo”><\/p>\n

The following <input> element also matches ngModel:<\/p>\n

<input data-ng-model=”foo”><\/p>\n

And the following <person> element matches the person directive:<\/p>\n

<person>{{name}}<\/person><\/p>\n

Normalization<\/strong><\/p>\n

AngularJS 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).<\/p>\n

The normalization process is as follows:<\/p>\n

Strip x- and data- from the front of the element\/attributes.
\nConvert the:, -, or _-delimited name to camelCase.<\/p>\n

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.<\/strong><\/p>\n

\"\"<\/a><\/p>\n