what happened to ng-bind-attr?

[lanterndev]

I need to write something like

<svg>
  <circle ng-bind-attr="{cx: cx, cy: cy, r: r}"></circle>
</svg>

because if I instead write

<svg>
  <circle cx="{{cx}}" cy="{{cy}}" r="{{r}}"></circle>
</svg>

the browser throws errors like

Error: Invalid value for <circle> attribute cx="{{ cx }}"

because Angular has not yet replaced the values of these attributes by the time the element is parsed.

It looks like Angular used to have ng-bind-attr which would solve exactly this problem, but it was taken out in 5502 / https://github.com/angular/angular.js/blob/master/CHANGELOG.md#100rc3-barefoot-telepathy-2012-03-29 and I have been unable to find any documentation of why it was taken out and what you're supposed to use instead. Can anyone shed some light on this?

[IgorMinar]

we took it out because it didn't seem necessary. previously the template compiler depended on ng-bind-attr directive, but after a refactoring it was not needed any more.

this is where the attr interpolation is detected currently:

angular.js/src/ng/compile.js

Line 477 in 649b892

addAttrInterpolateDirective(node, directives, value, nName);

if we were to reintroduce the support for ngBindAttr it should work consistently with the regular interpolation.

I wonder if that means that we'd need to special case it in the compiler rather than implementing it as a regular directive.

[wmertens]

Question: Can ng-bind-attr handle case-sensitive attributes? For example the viewBox attribute on is case sensitive.

I was trying out the workaround shown for the svg warnings in #1050 but since ng treats attributes as case-insensitive I couldn't make it work for viewBox. A shame, really, because with ng:attr-viewBox or perhaps late:viewBox you could have a generic prefix to do late attribute additions in the same syntax as normal ones.

Perhaps a "late:" prefix could be used specifically to do late binding on attributes, leaving the attribute case exactly like it is? Then ng:src could also be written as late:src for example.

[gmp26]

I'd welcome a resolution of this issue as angular bindings to SVG attributes currently fail in Chrome. If the values are interpolated then the fixes suggested in issue #1050 also fail. The following nasty hack does solve the problem by aliasing 'svgXXX' attributes to 'XXX' similar to ngSrc etc. It assumes templates for SVG include things like

    <svg svg-width="{{outerWidth}}" svg-height="{{outerHeight}}">

The hack inserts

// hack to avoid svg attribute errors - uses svgXXX alias for XXX
if(name.slice(0,3)==='svg') {
    attr.$set(name.slice(3).toLowerCase(), value);
}

in function addAttrInterpolateDirective after

attr.$set(name, value);

at:

angular.js/src/ng/compile.js

Line 1040 in 649b892

attr.$set(name, value);

[wmertens]

@gmp26 you shouldn't do the .toLowerCase(), otherwise you can't set the viewBox attribute which is case sensitive.

I do like the generic prefix but would prefer something like "late:".

[gmp26]

Agreed - there may be other cases apart from SVG and 'late' would then make more sense.
So do we end up with this? I don't think we want to match the colon here because that's one of the alternate syntaxes anyway.

if(name.slice(0,4)==='late') {
    attr.$set(name.slice(4), value);
}

[wmertens]

Hmm, isn't the colon a valid syntax in all browsers? Then "late:" would be a very specific prefix that is very unlikely to be part of real attributes.

BTW, you probably meant attr.$set(name.slice(5), value);, no?

Wout.

On Feb 11, 2013, at 11:59 , Mike Pearson notifications@github.com wrote:

Agreed - there may be other cases apart from SVG and 'late' would then make more sense.
So do we end up with this? I don't think we want to match the colon here because that's one of the alternate syntaxes anyway.

if(name.slice(0,4)==='late') {
attr.$set(name.slice(4), value);
}
—
Reply to this email directly or view it on GitHub..

[lrlopez]

I've just sent a PR that implements this feature. I hope it gets reviewed soon.