Rendern von SVG via Angular ng-bind-html

Question

In einer aktuellen Frage (Reference Angular binding from javascript) fragte ich, wie man eine generierte SVG an ein bestimmtes div bindet. Ich habe zwei gute Antworten, an denen ich seither herumgebastelt habe.

Ich versuche, ein SVG-Bild anzuzeigen, das basierend auf bestimmten Eigenschaften erstellt wird. Grundsätzlich

Ich habe einen kleinen Winkel Skript, das zur Erzeugung von SVG-Code eine Reihe von Funktionen enthält, zB:

.controller('ctlr',['$scope','$sce', function($scope,$sce) { 
    $scope.buildSvg(width, height, obj){ 
    var img = ...call a lot of svg-functions 
    return $sce.trustAsHtml(img); 
} 

Meine Absicht ist, diese auf der Webseite enthalten über:

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

Wie auch immer, es fällt mir schwer, das zu erreichen, zumindest mit den Javascript-generierten SVG-Tags. Es funktioniert, wenn ich den Img-Code in eine andere $ scope-Variable kopiere (und eine Menge Escaping hinzufüge) und dann über ng- Bind-HTML.

Da der Code auf Plunker hier verfügbar: Example

ich die folgende Fehlermeldung erhalten:

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 

Muss ich irgendwie $ sce informieren Stringliterale in den SVG-Tags zu entkommen?

Answer 1

Ich denke, Ihr Problem ist mehr in Bezug darauf, wie Sie das Objekt in HTML binden. Ich meine, die Tatsache, dass Sie das Objekt durch eine Funktion zurückgeben, kann die Ursache des Problems sein. Außerdem, wenn Sie eckige Logbücher sehen, beschweren sie sich über "Digest" und "Apply", das ist der Lebenszyklus der gesamten Bindung in Angular.

Also im Grunde werden Sie in der Lage sein zu lösen, dass $ sce.trustAsHtml (SVGSTRING) wie Sie getan, aber speichern Sie es zuvor in einer Variablen wie $ scope.svg.

script.js

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

Und in den HTML-Code sollte wie die

HTML

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

Es sollte so einfach arbeiten, ich Sie setzen eine Plunker, in dem Sie Sehen Sie, wie es sogar funktioniert, Daten von einer Anfrage abzurufen

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

Hoffe, das hilft