通过角渲染SVG NG绑定，HTML [英] Rendering SVG via Angular ng-bind-html

问题描述

在最近的问题（<一个href=\"http://stackoverflow.com/questions/30765137/reference-angular-binding-from-javascript\">Reference角从JavaScript 绑定）我问怎么生成SVG绑定到特定的div。我得到了我一直在摆弄因为两个很好的答案。

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.

我想显示系统会根据特定的属性建立一个SVG图像。

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

基本上我有一个微小的角度脚本，其中包括了一些功能，用于生成SVG code，例如：

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>

不过，我有一个很难得到这个工作，至少使用JavaScript生成的​​SVG标签，它的工作原理，如果我复制粘贴IMG code到另一个$范围变量（和添加了很多逃逸）和然后将其包含通过NG-绑定HTML的。

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.

由于code是可以在这里Plunker：
例

As the code is available on Plunker here: 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的标记？

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

推荐答案

我觉得你的问题是关于多给你如何在HTML绑定的对象。我的意思是，你是通过函数返回的对象可以是问题的原因这一事实。此外，如果你看到的角日志，他们都在抱怨消化和应用，这是在角所有绑定的生命周期。

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.

所以基本上，你将能够解决之前做$ sce.trustAsHtml（SVGSTRING）像你一样，但它保存在类似$ scope.svg一个变量。

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

SCRIPT.js

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

和在HTML应该是这么简单。

And in the html should be as simple as that

HTML

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

它应该工作，我把你plunker中，你可以看到它是如何甚至请求工作中检索数据。

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/

希望这有助于

这篇关于通过角渲染SVG NG绑定，HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！