Unable to fetch angular controller's data into HTML

Question

I am using Angular 1.6. I am trying to fetch x and y positions for an SVG element from a component controller.

this.painterModel = [];
var imageRef = {};
imageRef.path='assets/images/sample.png';
imageRef.xPos = 100;
imageRef.yPos = 100;
this.painterModel.push(imageRef);

Currently, the list has only one element. The HTML looks like this.

<svg id="frontView" width="1000" height="1000">
            <image ng-repeat="x in $ctrl.painterModel" href="x.path" x="x.xPos" y="x.yPos" />
</svg>

I always get this error in the console that says,

app.js:9756 Error: <image> attribute x: Expected length, "x.xPos".
app.js:9756 Error: <image> attribute y: Expected length, "x.yPos".

What am I doing wrong?

davidkonrad · Accepted Answer · 2018-08-24 10:42:00Z

0

What about {{ rendering }} out the actual values instead?

<image ng-repeat="x in $ctrl.painterModel" 
  ng-href="{{ x.path }}" 
  x="{{ x.xPos }}" 
  y="{{ x.yPos }}" 
/>

As it is now, you simply pass the string 'x.xPos' to the attribute, not the value of x.xPos. Thats why you get the error Expected length, "x.xPos". Also, use ng-href instead of href.

edited Aug 24, 2018 at 10:42

answered Aug 24, 2018 at 10:36

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to fetch angular controller's data into HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related