How to catch html compile errors from invalid attributes by binding in AngularJS

Issue

I’m quite new to AngularJS.
So I have an SVG which I need to modify from the controller:

<svg class="rotate" viewbox="0 0 250 250">
   <path transform="translate(125, 125)" d="{{user.timerAnim}}"/>
</svg>

user.timerAnim is populated from the controller in a timeout.
This works, but it throws exceptions to the console, because initially the browser reads the d attribute as invalid, after which AngularJS binds to it and starts working normally.

I had a similar problem before with img tag’s src attribute, which had a solution by using ng-src

How do I catch these errors? Is this not a good way to animate an SVG in AngularJS?

Solution

If anyone’s interested, I found out you can use ng-attr prefix for any html (and svg) attributes to use bind to angularjs. So this solved the problem:

<svg class="rotate" viewbox="0 0 250 250">
   <path transform="translate(125, 125)" ng-attr-d="{{user.timerAnim}}"/>
</svg>

Answered By – user1094553

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0