Angularjs 通过绑定html呈现SVG

在最近的一个问题（）中，我问了如何将生成的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);
 }

我的目的是通过以下方式将此信息包含在网页上：

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

svg应该放在这里

但是，我很难做到这一点，至少对于javascript生成的SVG标记来说，如果我将img代码复制粘贴到另一个$scope变量中（并添加大量转义），然后通过ng bind html将其包含进来，那么它就可以工作了

由于该代码可在Plunker上找到，因此：

我得到以下错误：

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

错误：[$sce:itype]http://errors.angularjs.org/1.4.0/$sce/itype？p0=html
错误（本机）
在http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:6:416
在$get.trustAs(http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:140:269)
at Object.$get.d.（匿名函数）[as trustAsHtml](http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:142:444)
m.$scope.buildSvg(file:///C:/Dropbox/workspace/famview/public/javascripts/svgController.js:37:16)
fn时（评估时）(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)
m.$get.m.$digest(http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:131:221)
m.$get.m.$apply(http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:134:361)
在http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js:19:362

---

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

我认为您的问题更多地涉及如何在html中绑定对象。我的意思是，通过函数返回对象可能是问题的原因。此外，如果您看到angular日志，他们会抱怨“摘要”和“应用”，这是angular中所有绑定的生命周期

因此，基本上，您将能够像以前一样使用$sce.trustAsHtml（SVGSTRING）解决这个问题，但之前将其保存在$scope.svg之类的变量中

SCRIPT.js

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

在html中，应该像这样简单

HTML

它应该可以工作，我给你放了一个plunker，你可以看到它是如何从请求中检索数据的

---

希望这有帮助

希望我不会得-1分。我只是想帮忙！。。。我不值得-1。。。我添加了一个新答案，因为我无法编辑最后一个答案..有人在我编辑之前删除了它

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