ng bind html 换行,通过Angular ng-bind-html渲染SVG

在最近的一个问题(Reference Angular binding from javascript)中，我问过如何将生成的SVG绑定到特定的div。从那以后，我得到了两个很好的答案。

我试图显示基于特定属性构建的SVG图像。

基本上我有一个很小的Angular脚本，其中包含许多用于生成svg代码的函数，例如：

.controller('ctlr',['$scope','$sce', function($scope,$sce) {

$scope.buildSvg(width, height, obj){

var img = ...call a lot of svg-functions

return $sce.trustAsHtml(img);

}

我的目的是通过以下方式将其包含在网页中：

svg should go here

但是，我很难让它工作，至少使用javascript生成的SVG标签，如果我将img代码粘贴到另一个$ scope变量(并添加大量转义)然后包含它，它就可以工作通过ng-bind-html。

由于此处的代码在Plunker上可用：

Example

我收到以下错误：

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 (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:210:400), :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

我是否需要以某种方式通知$ sce以逃避SVG标记中的字符串文字？