D3 Integration with Angular: "Error: Invalid value for attribute <rect> x"

Question

I am trying to bind SVG attributes using AngularJS. I have the following code for a form size descriptor:

// S handle. var s_handle = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "rect")) .attr("id", "s-resize") .attr("x", "{{(objects['" + id + "'].w - (scope.dragHandle.width / 2))}}") .attr("y", "{{(objects['" + id + "'].h - (scope.dragHandle.width / 2))}}") .attr(scope.dragHandle) .attr("cursor", "s-resize") .call(sresize); $compile(s_handle.node())(scope); element.append(s_handle); 

When I run this code, I get the following error:

 Error: Invalid value for <rect> attribute x="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].w - (scope.dragHandle.width / 2))}}" d3.min.js:1 Error: Invalid value for <rect> attribute y="{{(objects['9b320170-6365-4f40-801d-a7a5c6b936f9'].h - (scope.dragHandle.width / 2))}}" d3.min.js:1 

I tried removing the add step in order to isolate the problem - and it looks like the problem really occurs when I set the x and y attributes, even before the Angular compilation stage.

Note that this method works with another SVG object using the transform attribute, which initially accepts a string.

Has anyone encountered this problem before? Are there any solutions? Thanks.

Edit: A step has passed, and it looks like $ compile` does not actually change the element. Could this be because the item is invalid?

Answer 1

This seems to be related to this problem: https://github.com/angular/angular.js/pull/2061

It has also been resolved in this matter.

SVG elements use an XML-based schema and have a namespace and, as such, have validation rules. Some attributes cannot accept the Angular directive because they expect a numerical value, and the browser checks this before Angular ever has the ability to catch it (even if the element is created and not added to the DOM yet).

If anyone encounters this problem, hope this answer helps.