使用Angular ng-bind-html渲染SVG

Question

使用Angular ng-bind-html渲染SVG

8

在最近的一个问题中（参考Angular绑定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上可用，这里是链接: 示例

我会收到以下错误：

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

我需要在SVG标签中以某种方式通知$sce转义字符串字面量吗？

- tschmitty

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ackuser · Accepted Answer

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

因此，基本上，您将能够通过类似于 $scope.svg = $sce.trustAsHtml(SVGSTRING) 的方式将其保存在变量中来解决这个问题。

SCRIPT.js

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

而且 HTML 应该尽可能简单

HTML

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

它应该能够工作，我正在为您提供一个 Plunker，您可以从中看到它甚至可以从请求中检索数据的工作原理。

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

希望对你有所帮助。