Rendering SVG przez Angular ng-bind-html

Question

W ostatnim pytaniu (Reference Angular binding from javascript) zapytałem, jak powiązać wygenerowany SVG z konkretnym divem. Dostałem dwie dobre odpowiedzi, z którymi od czasu majstrowałem.

Próbuję wyświetlić obraz SVG, który zostanie zbudowany na podstawie określonych właściwości.

Zasadniczo mam malutką kątowa skrypt, który zawiera szereg funkcji do generowania kodu SVG, np

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

Moim zamiarem jest to ten na stronie internetowej poprzez:

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

Mam jednak problem z uruchomieniem tego, przynajmniej z wygenerowanymi przez javascript tagami SVG, działa to, jeśli skopiuję wklejenie kodu img do innej zmiennej $ scope (i doda dużo ucieczki), a następnie dołączę ją przez ng- bind-html.

Ponieważ kod jest dostępny na Plunker tutaj: Example

pojawia się następujący błąd:

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 

muszę jakoś poinformować $ SCE uciec literały ciągów znaków w tagach SVG?

Answer 1

Myślę, że twój problem jest bardziej związany z tym, jak wiążesz obiekt w html. Chodzi mi o to, że przyczyną problemu jest fakt, że zwracasz obiekt za pośrednictwem funkcji. Co więcej, jeśli widzisz dzienniki kątowe, narzekają na "trawienie" i "zastosowanie", to jest cykl życia wszystkich wiązań w Angular.

Zasadniczo, będziesz w stanie rozwiązać to robiąc $ sce.trustAsHtml (SVGSTRING) tak jak Ty, ale zapisując je wcześniej w zmiennej takiej jak $ scope.svg.

script.js

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

A w html powinno być tak proste, jak to

HTML

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

Powinien działać, ja kładę wam plunker w którym można zobacz, jak to działa, pobierając dane z żądania

Mam nadzieję, że to pomoże