Element directives are great for stand-alone widget-like things, but are
not very easy to compose. It is very much desirable to have multiple
directives on a single node. For example how would you write this using
only element directives:
<a ng-class="{important: customer.isVIP}"
ng-click="selectCustomer(customer)" ng-hide="customer.isHidden">Click To
Select</a>
As you can see, attribute directives are much easier to compose together in
a single node. How would you write the equivalent using only element
directives?
Furthermore I don’t think a lot of the benefits you list for element
directives are entirely accurate.
In terms of posibility of clashing of directive names, both attribute
directives and element directives will clash equally. For example:
<tabs></tabs>
<div tabs></div>
These will both instantiate a directive called ‘tabs’ and will clash with
any other attribute or element directive called “tabs” defined in any other
module. So in this regard there is no advantage to using the element
directive to the attribute directive other than visual style/asthetics.
In terms of handling of parameters, both element directives and attribute
directives treat attributes in the exact same way. The following are
equivalent:
<tab tab-title="My Tab"></tab>
<div tab tab-title="My Tab"></div>
The element directive version is no more “namespaced” or protected from
clashing as any other attribute-type directive. The attribute “tab-title”
is as much of an “invented syntax” in the element directive as in the
attribute directive.
Finally, there is no difference as to the type of content an element or
attribute-based directive can hold. The reason for ng-repeat-start and
ng-repeat-end is simply a choice made by the developers to allow for not
having to wrap the repeated content in its own node. But you could easily
write your own directive:
<my-repeat repeat-expression="person in persons">
<p>Hello {{person.name}}</p>
<p>How are you?</p></my-repeat>
The equivalent with attribute syntax would be something like:
<div my-repeat="person in persons">
<p>Hello {{person.name}}</p>
<p>How are you?</p></div>
As you can see, in both cases the directives can contain a document
fragment. Also, notice that in the <my-repeat> version I need to invent a
repeat-expression attribute for the expression, while in the attribute
version I can use the my-repeat attribute itself.
Hopefully, I helped you understand a bit better why attribute is the
default choice for directives. Element directives can be great for making
higher-level components (e.g. tabs, tabpanes, layouts, etc…). In
particular, element directives usually should include their own template
that replaces the entire element with new HTML. The advantage to using
element is purely asthetic though. You can pretty much achieve everything
you can do with element directives using attribute directives, but you
can’t achieve everything you can do with attribute-directives by using only
element directives.
One additional thought, is that using element directives requires some
special handling in older versions of IE to make them work, so if you must
support IE this could be a concern.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
