Angular JS – Directive Example

Angular JS Directive is an extension of HTML tags.

It helps the developer to use custom tags and provides reusability.

We can define and implement custom tags and custom directive., which helps the user to use resuse the same template and logic all over the application reducing the overhead of writing everywhere.

Following are different ways of declaring custom tags and custom attributes.

Using the keyword “restrict”, type of directive can be defined.,

  • C>– Directive used as class name in HTML element.
    (Example: restrict=”C” …. <div class=”customdirective”/>)
  • A – Directive used as attribute in HTML element.
    (Example: restrict=”A” …. <div customdirective>)
  • M– Directive can be used as comments in HTML.
    (Example: restrict=”M” …. <!–Using directive:customdirective–>)
  • E – Directive used as element in HTML element.
    (Example: restrict=”E” …. <customdirective></customdirective>)

Below example explains the “Element” directive widely used.

[/crayon]

Output:

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *