AngularJS अभिव्यक्ति <object> टैग

Question

मैं अपने AngularJS नियंत्रक में $scope.doc_details की तरह एक गुंजाइश है, और मैं इसे उपयोग करने के लिए एक टैग का उपयोग कर, इस तरह एक pdf फ़ाइल प्रदर्शित करना चाहते हैं:

<object data="{{doc_details.file_url}}" type="application/pdf"></object> 

लेकिन यह 'नहीं करता है टी ब्राउज़र में लोड करने के लिए, मेरी क्रोम कंसोल में, सब मैं देख रहा है:

Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost/%7B%7Bdoc_details.file_url%7D%7D 

और जब मैं सिर्फ <span>{{doc_details.file_url}}</span> का उपयोग कर इसे प्रदर्शित यह मूल्य दिखा।

Answer 1

समस्या है कि यहाँ ब्राउज़र डोम में

<object data="{{doc_details.file_url}}" type="application/pdf"></object> 

देख रही है इससे पहले कि कोणीय यह संकलित, और स्पष्ट रूप से {{doc_details.file_url}} एक मान्य URL नहीं है।

निर्देश यहां आपका मित्र हो सकता है।

हम लिखना चाहते हैं कहते हैं:

<pdf src='doc_details.file_url'></pdf> 

हम एक बहुत ही सरल निर्देश बना सकते हैं:

app.directive('pdf', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
      var url = scope.$eval(attrs.src); 
      element.replaceWith('<object type="application/pdf" data="' + url + '"></object>'); 
     } 
    }; 
}); 

यह object तत्व के निर्माण को स्थगित होगा जब तक हम वास्तव यूआरएल हमारे पास उपलब्ध है दायरे से (मान लीजिए कि यह पहले से ही है - अन्यथा आप $watchsrc स्कोप पर उपलब्ध होने तक विशेषता देना चाहते हैं)।

Here this is in a fiddle।

Answer 2

AngularJS 1.1.4 के रूप में, आप data विशेषता के लिए ng-attr- उपसर्ग का उपयोग कर सकते हैं:

<object ng-attr-data="{{doc_details.file_url}}" type="application/pdf"></object> 

मनमाना विशेषताओं के AngularJS: Interpolation and data-binding पर खंड बंधन के लिए ngAttr देखें।

Answer 3

आपको सबसे पहले यह जांचने की आवश्यकता है कि प्रतिक्रिया एक सरणी है, अगर यह है, तो इसे आधार 64 में परिवर्तित करें। इसके अलावा आप असाइन करने के लिए setattribute का उपयोग कर सकते हैं।