{"id":59749,"date":"2018-05-02T17:56:23","date_gmt":"2018-05-02T12:26:23","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59749"},"modified":"2024-04-12T14:20:46","modified_gmt":"2024-04-12T08:50:46","slug":"angular-directives","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-directives\/","title":{"rendered":"Angular Directives"},"content":{"rendered":"

Angular Directives<\/h1>\n

At a high level, Angular 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.
\nWhat does it mean to “compile” an HTML template? For AngularJS, “compilation” means attaching directives to the HTML to make it interactive. The reason we use the term “compile” is that the recursive process of attaching directives mirrors the process of compiling source code in compiled programming languages.<\/p>\n

 <\/p>\n

Matching Angular 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

IT Professionals, Web Developers, web programmers, IT students can use the below links to be updated on Angular 4<\/p>\n