Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat($compile): Allow late binding attributes
Sometimes is not desirable to use interpolation on attributes because the user agent parses them before the interpolation takes place. I.e: <svg> <circle cx="{{cx}}" cy="{{cy}}" r="{{r}}"></circle> </svg> The snippet throws three browser errors, one for each attribute. For some attributes, AngularJS fixes that behaviour introducing special directives like ng-href or ng-src. This commit is a more general solution that allows prefixing any attribute with "ng-attr-", "ng:attr:" or "ng_attr_" so it will be set only when the binding is done. The prefix is then removed. I.e: <svg> <circle ng_attr_cx="{{cx}}" ng-attr-cy="{{cy}}" ng:Attr:r="{{r}}"></circle> </svg> Closes angular#1050 Closes angular#1925
- Loading branch information
638e6fd
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This does not play well with data- prefix.
638e6fd
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
John, can you show me a non-working example? A Plunker link would be nice...
638e6fd
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You cannot set namespaced attributes this way, e.g.
The
x
attribute is set correctly.However, the
xlink:href
is broken. This example will set an attribute ofxlink-href
on the image tag, instead ofxlink:href
. Maybe this is unavoidable, but it would be handy if late binding supported this.638e6fd
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Angular normalization won't allow you setting namespaced attributes. Please, have a look into angular#1925 where some alternatives are shown. The post at the bottom has a gist that implements a new directive which could be useful to you.