Rendering SVG via Angular ng-bind-html

Question

In a recent question (Reference Angular binding from javascript) I asked how to bind a generated SVG to a specific div. I got two good answers which I've been tinkering with since.

I'm trying to display a SVG image which gets built based on specific properties.

Basically I have a tiny Angular script which includes a number of functions for generating svg code, e.g.:

.controller('ctlr',['$scope','$sce', function($scope,$sce) {
  $scope.buildSvg(width, height, obj){
     var img = ...call a lot of svg-functions
     return $sce.trustAsHtml(img);
 }

My intention is to include this on the web page via:

<div ng-bind-html="buildSvg(60,140,item)">svg should go here</div>

However, I have a hard time getting this to work, at least with the javascript generated SVG tags, it works if I copy paste the img code into another $scope variable (and add a lot of escaping) and then include it via ng-bind-html.

As the code is available on Plunker here: Example

I get the following error:

Error: [$sce:itype] http://errors.angularjs.org/1.4.0/$sce/itype?p0=html
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:6:416
at $get.trustAs (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:140:269)
at Object.$get.d.(anonymous function) [as trustAsHtml] (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:142:444)
at m.$scope.buildSvg (file:///C:/Dropbox/workspace/famview/public/javascripts/svgController.js:37:16)
at fn (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:210:400), <anonymous>:2:301)
at Object.get (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:115:108)
at m.$get.m.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:131:221)
at m.$get.m.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:134:361)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:19:362

Do I need to somehow inform $sce to escape string literals in the SVG tags?

ackuser · Accepted Answer · 2016-03-17 11:28:45Z

15

I think your problem is more regarding to how you are binding the object in html. I mean, the fact that you are returning the object through a function can be the cause of the problem. Moreover, if you see angular logs, they are complaining about "digest" and "apply", that is the life cycle of all the binding in Angular.

So basically, you will be able to solve that doing $sce.trustAsHtml(SVGSTRING) as you did, but saving it before in a variable like $scope.svg.

SCRIPT.js

$scope.svg = $sce.trustAsHtml(SVGSTRING);

And in the html should be as simple as that

HTML

<div ng-bind-html="svg"></div>

It should work, I am putting you a plunker in which you can see how it even works retrieving data from a request

http://embed.plnkr.co/gQ2Rrn/

Hope this helps

answered Mar 17, 2016 at 11:28

ackuser

5,9296 gold badges45 silver badges49 bronze badges

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

1 Comment

ackuser Over a year ago

Hope I won't get a -1 . I just trying to help!...I don't deserve -1... I have put a new answer because I couldn't edit the last one..Someone deleted it before I could edit

Collectives™ on Stack Overflow

Rendering SVG via Angular ng-bind-html

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related