A directive which can be element, attribute, css class and comment?

6324

We know that there are four types of directives:

HTML element (E)
an attribute on an element (A)
a CSS class (C)
comment (M)

We can use restrict: 'EACM' in a directive. But can someone give a practical example when we need a directive to be element, attribute, css class and comment? Thanks.

Pierre Gayvallet

Basically and really quick :

The only real used values are E and A.

E is element directive. This is the logical type of restriction to use for directives injecting content (template or templateUrl). This would be the nearest that AngularJS has to offer to webcomponents.

A is attribute. This is the logical type of restriction to enhance an element by adding behaviour to an element inside a template or to an E-directive element (example : ng-click, ng-show...) .

C is more or less useless. Same expected usages as A directives but less visible when you read your Angular HTML code because you're gonna mix styling css classes and directive css classes. Subject to risk when your designer removes directive classes from your template, for not finding them in your css files (true story). Quicker answer would be: don't use it, use A instead.

Best off all, M is plainly totally useless in 99.999% of usages. This is basically here for markup validation (avoiding invalid tags or attributes that can be caused by the E and A directives) for psychotics who hope to (and think it's a good/required thing to) have Angular templates validating any w3 validator service. Can also be used for backward compatibility in rare cases. Quicker answer for M would be: it's an hack, don't use it.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

A directive which can be element, attribute, css class and comment?

From Dev

how to access the class css properties from an attribute directive associated with the same element

From Dev

Angular directive is not adding css class to another element

From Dev

Pass an attribute directive to an element directive

From Dev

Can we target a element which has (data-toggle="collapse") attribute and no class using jquery?

From Dev

Which kind of attribute can support a html element?

From Dev

How can I listen an element's attribute change in an Angular directive?

From Dev

How to change css class attribute from ng directive?

From Dev

Can we add class attribute in option element?

From Dev

Which attribute is applied if both id and class are specified for an element and why?

From Dev

Angular : Adding Attribute directive on Element Directive

From Dev

Angular : Adding Attribute directive on Element Directive

From Dev

Attribute directive to work on an element inside another directive

From Dev

when jQuery FadeOut an element, which attribute changes in css?

From Dev

Getting the children of an element with an attribute directive

From Dev

Getting the children of an element with an attribute directive

From Dev

How to create a Attribute Directive to insert another attribute directive in a element in AngularJS

From Dev

Adblock. Add css class or remove attribute from element

From Dev

using element.AddClass to add an angular js directive, which is restricted to act as a 'class'

From Dev

How can I change the text of a button which is in class element?

From Dev

Add css attribute to element

From Dev

Angular element directive how to get attribute value

From Dev

angularjs directive binding name attribute to template element

From Dev

Angular directive how to add an attribute to the element?

From Dev

Change Angular directive element attribute dynamically

From Dev

AngularJS: Directive repetition, works as attribute but not as element

From Dev

Setting attribute value of an element in camelCase using a directive

From Dev

Angular attribute directive that wraps its element

From Dev

dynamic templateUrl in directive based on element attribute interpolation

Related Related

  1. 1

    A directive which can be element, attribute, css class and comment?

  2. 2

    how to access the class css properties from an attribute directive associated with the same element

  3. 3

    Angular directive is not adding css class to another element

  4. 4

    Pass an attribute directive to an element directive

  5. 5

    Can we target a element which has (data-toggle="collapse") attribute and no class using jquery?

  6. 6

    Which kind of attribute can support a html element?

  7. 7

    How can I listen an element's attribute change in an Angular directive?

  8. 8

    How to change css class attribute from ng directive?

  9. 9

    Can we add class attribute in option element?

  10. 10

    Which attribute is applied if both id and class are specified for an element and why?

  11. 11

    Angular : Adding Attribute directive on Element Directive

  12. 12

    Angular : Adding Attribute directive on Element Directive

  13. 13

    Attribute directive to work on an element inside another directive

  14. 14

    when jQuery FadeOut an element, which attribute changes in css?

  15. 15

    Getting the children of an element with an attribute directive

  16. 16

    Getting the children of an element with an attribute directive

  17. 17

    How to create a Attribute Directive to insert another attribute directive in a element in AngularJS

  18. 18

    Adblock. Add css class or remove attribute from element

  19. 19

    using element.AddClass to add an angular js directive, which is restricted to act as a 'class'

  20. 20

    How can I change the text of a button which is in class element?

  21. 21

    Add css attribute to element

  22. 22

    Angular element directive how to get attribute value

  23. 23

    angularjs directive binding name attribute to template element

  24. 24

    Angular directive how to add an attribute to the element?

  25. 25

    Change Angular directive element attribute dynamically

  26. 26

    AngularJS: Directive repetition, works as attribute but not as element

  27. 27

    Setting attribute value of an element in camelCase using a directive

  28. 28

    Angular attribute directive that wraps its element

  29. 29

    dynamic templateUrl in directive based on element attribute interpolation

HotTag

Archive