通过 Angular ng-bind-html 渲染 SVG

Question

在最近的一个问题 (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);
 }

我的意图是通过以下方式将其包含在网页上：

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

但是，我很难让它工作，至少使用 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 <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 以转义 SVG 标签中的字符串文字？

Answer 1

我认为您的问题更多是关于您如何在 html 中绑定对象。我的意思是，您通过函数返回对象的事实可能是问题的原因。而且，如果你看到 Angular 日志，他们在抱怨“digest”和“apply”，这就是 Angular 中所有绑定的生命周期。

所以基本上，您将能够像以前一样执行 $sce.trustAsHtml(SVGSTRING) 来解决这个问题，但之前将其保存在像 $scope.svg 这样的变量中。

SCRIPT.js

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

而在html中应该就是这么简单

HTML

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

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

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

希望对你有帮助