एंगुलर एनजी-बाइंड-एचटीएमएल

Question

के माध्यम से एसवीजी प्रस्तुत करना हाल के एक प्रश्न (Reference Angular binding from javascript) में मैंने पूछा कि एक विशिष्ट div को जेनरेट किए गए एसवीजी को कैसे बांधें। मुझे दो अच्छे जवाब मिले जो मैं तब से टंकण कर रहा हूं।

मैं एक एसवीजी छवि प्रदर्शित करने की कोशिश कर रहा हूं जो विशिष्ट गुणों के आधार पर बनाया गया है।

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

:

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

मेरे इरादे के माध्यम से वेब पेज पर इस शामिल करने के लिए है:

मूल रूप से मैं एक छोटे कोणीय स्क्रिप्ट जो svg कोड पैदा करने के लिए कई कार्य करने की भी शामिल है, उदाहरण के लिए है हालांकि, मुझे कम से कम जावास्क्रिप्ट जेनरेट एसवीजी टैग के साथ काम करने में मुश्किल हो रही है, यह काम करता है अगर मैं आईएमजी कोड को अन्य $ स्कोप वेरिएबल में पेस्ट करता हूं (और बहुत से भागने को जोड़ता हूं) और फिर इसे एनजी- बाँध-एचटीएमएल।

के रूप में कोड Plunker यहां पर उपलब्ध है: 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 सूचित करने के लिए एसवीजी टैग में स्ट्रिंग शाब्दिक से बचने के लिए की जरूरत है?

Answer 1

मुझे लगता है कि आपकी समस्या एचटीएमएल में ऑब्जेक्ट को बाध्य करने के तरीके के बारे में अधिक है। मेरा मतलब है, तथ्य यह है कि आप एक समारोह के माध्यम से वस्तु वापस कर रहे हैं समस्या का कारण हो सकता है। इसके अलावा, यदि आप कोणीय लॉग देखते हैं, तो वे "पाचन" और "लागू" के बारे में शिकायत कर रहे हैं, यह कोणीय में सभी बाध्यकारी का जीवन चक्र है।

तो मूल रूप से, आप $ sce.trustAsHtml (SVGSTRING) को करने के लिए हल करने में सक्षम होंगे, लेकिन इसे $ scope.svg जैसे चर में सहेजने में सक्षम होंगे।

script.js

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

और HTML में है कि

HTML के रूप में सरल होना चाहिए

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

यह काम करना चाहिए, मैं तुम्हें एक plunker डाल रहा हूँ जो आप कर सकते हैं में देखें कि यह अनुरोध से डेटा पुनर्प्राप्त करने में भी काम करता है

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

आशा है कि यह