Rendering SVG tramite Angular ng-bind-html

Question

In una domanda recente (Reference Angular binding from javascript) ho chiesto come associare un SVG generato a un div specifico. Ho ricevuto due buone risposte con cui ho lavorato da allora.

Sto provando a visualizzare un'immagine SVG che viene creata in base a proprietà specifiche.

Fondamentalmente ho una piccola sceneggiatura angolare che comprende una serie di funzioni per la generazione di codice SVG, ad esempio:

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

La mia intenzione è quella di includere questo sulla pagina web tramite:

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

Tuttavia, ho difficoltà a farlo funzionare, almeno con i tag SVG generati da JavaScript, funziona se copio incolla il codice img in un'altra variabile $ scope (e aggiungo un sacco di escape) e poi lo includo tramite ng- bind-html.

Poiché il codice è disponibile sul Plunker qui: Example

ottengo il seguente errore:

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 

Ho bisogno di comunicare in qualche modo $ sce a fuggire letterali stringa nel tag SVG?

Answer 1

Penso che il problema riguardi maggiormente il modo in cui si associa l'oggetto in html. Voglio dire, il fatto che stai restituendo l'oggetto tramite una funzione può essere la causa del problema. Inoltre, se vedete log angolari, si lamentano di "digest" e "apply", ovvero il ciclo di vita di tutti i binding in Angular.

Quindi, in pratica, sarete in grado di risolvere ciò facendo $ sce.trustAsHtml (SVGSTRING) come avete fatto, ma salvandolo prima in una variabile come $ scope.svg.

script.js

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

E in html dovrebbe essere così semplice come sembra

HTML

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

Dovrebbe funzionare, io ti sto mettendo un plunker in cui è possibile guarda come funziona anche recuperando i dati da una richiesta

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

Spero che questo aiuti