angularjs表現<object>タグ

Question

私は私のangularjsコントローラで$scope.doc_detailsのようなスコープを持っている、と私はこのように、タグを使用してPDFファイルを表示するためにそれを使用したい：

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

が、それはdoesnの

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>を使用してそれを表示するときには、値を表示する：tは私のクロムコンソールで、私が見るすべては、ブラウザにロードされます。角度がそれをコンパイルし、明らかに{{doc_details.file_url}}が有効なURLではありません前にブラウザがDOMに

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

を見ていることをここ

Answer 1

問題があります。

ディレクティブはあなたの友人になります。

は、私たちが書きたいと言う：

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

我々は非常に簡単な指示を作成することができます：私たちは実際に私たちに利用できるURLを持つまではobject要素の作成を延期します

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>'); 
     } 
    }; 
}); 

を（それが既に存在すると仮定すると、$watchが利用可能になるまでスコープ上のsrc属性になります）。

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を使って割り当てることができます。