curly brace inconsistency

321 views
Skip to first unread message

Daniel Nelson

unread,
Dec 8, 2011, 6:37:05 PM12/8/11
to ang...@googlegroups.com
ng:class="expression"

but...

ng:disabled="{{expression}}"

Is this seeming inconsistency something that is being cleaned up for
1.0, or is there a logical reason for the difference?

Thank You,

Daniel

Vojta Jina

unread,
Dec 9, 2011, 5:44:25 PM12/9/11
to ang...@googlegroups.com
Yep, there is a reason for this. ng:src, ng:href, ng:disabled, etc. because they are replacements for common html attributes src, href, disabled, and these are bound in same way...

V.

Daniel Nelson

unread,
Dec 10, 2011, 6:28:28 AM12/10/11
to ang...@googlegroups.com
> Yep, there is a reason for this. ng:src, ng:href, ng:disabled, etc. because
> they are replacements for common html attributes src, href, disabled, and
> these are bound in same way...

Hello Vojta,

I don't understand this reasoning. Is it a technical limitation or an
intentional design decision? If it is a design decision, then I would
think that all ng:xxx should be bound in the same way. I don't think
of ng:disabled as a replacement directive and ng:class as a pure
AngularJS directive. If they were consistent, I would learn the
AngularJS way, but as it is now, I have to look up each one to find
out which way to bind it, and it looks haphazard in the HTML to see
some ng: directives with {{ }} and some without. It makes it unclear,
at a glance, to see mistakes in the code.

Just my 2¢.

Thank You,

Daniel

Misko Hevery

unread,
Dec 10, 2011, 12:12:37 PM12/10/11
to ang...@googlegroups.com
This was an intentional decision, but I am not so sure about it any more. Here is the history.

<img src="/img/{{username}}.jpg">

will produce an error, so we wanted an easy way to fix that so we let the user add ng:

<img ng:src="/img/{{username}}.jpg">

This makes it inconsistant, but it makes it easy for the user to change.

<input disabled="{{exp}}">

does not work on ie since disabled is boolean and os IE ignores the value and this is permanently disabled, again we wanted to give user an easy fix 

<input ng:disabled="{{exp}}">

Which is inconsistant since the {{}} is meaningless. as this would be closer to be consistant. since you could never do any interpolation

<input ng:disabled="exp">

But what about ng:src? To be consistente it would have to be:
<img ng:src=" '/img/' + username + '.jpg' ">

but that is ugly and misses the point.

So in the name of simplicity we broke consistency.

-- misko



--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.


Daniel Nelson

unread,
Dec 10, 2011, 12:40:52 PM12/10/11
to ang...@googlegroups.com
Thank you Misko,

The ng:src example clearly indicates that the {{ }} should be present
in that case. But are there any other cases like it? If not, then it
could be the lone exception, which would be easy to grasp because of
the special use case.

I don't quite follow what you are saying about ng:disabled. I thought
you were saying that ng:disabled doesn't need the {{ }}, but
ng:disabled is one of the directives that does need {{ }}.

I wonder if the AngularJS team is looking at it as "these are real
HTML attributes that we are overriding" (and therefore should have {{
}}) vs. "these are solely AngularJS attributes" (which shouldn't have
{{ }}). In my mind, everything with ng: is an AngularJS attribute and
should behave the same insofar as they don't create ugliness (such as
in the ng:src=" '/img/' + username + '.jpg' " example you gave).

Best,

Daniel

Nate Kidwell

unread,
Dec 10, 2011, 1:00:26 PM12/10/11
to AngularJS
I imagine ng:href needs/uses {{ as well, but I'd guess custom tags
will keep extending the use cases for both sides of the coin.
Say you have a custom slideshow widget, I could see an attribute
reading like
<slide ng:transition="{{transitionType}}-{{transitionDirection}}" />

Of course you might have this split up into two separate attributes
and then you wouldn't need the {{ so that might be a bad example in
the end..

Misko Hevery

unread,
Dec 10, 2011, 1:47:24 PM12/10/11
to ang...@googlegroups.com
I think making ng:src and ng:bind-template the exceptions makes sense.

Reply all
Reply to author
Forward
0 new messages