angularjs espressione in html <object> tag

Question

Ho un ambito come $scope.doc_details nel mio controller angularjs, e voglio utilizzarlo per visualizzare un file pdf utilizzando un nome, come questo:

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

ma doesn' t ottenere caricato nel browser, nella mia console cromata, tutto quello che vedo è:

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

e quando ho appena lo mostro usando <span>{{doc_details.file_url}}</span> che mostrano il valore.

Answer 1

Il problema qui è che il browser sta vedendo

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

nel DOM prima di angolare lo compila, e ovviamente {{doc_details.file_url}} non è un URL valido.

Le direttive possono essere i tuoi amici qui.

dire che vogliamo scrivere:

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

Possiamo creare una semplice direttiva:

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

Ciò rinviare la creazione dell'elemento object fino a quando in realtà abbiamo l'URL a nostra disposizione dall'ambito (supponendo che sia già lì - altrimenti si vorrebbe $watch l'attributo src sull'oscilloscopio finché non è diventato disponibile).

Here this is in a fiddle.

Answer 2

Come di AngularJS 1.1.4, è possibile utilizzare il prefisso ng-attr- per l'attributo data:

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

Vedi l'ngAttr per il legame con gli attributi arbitrari sezione AngularJS: Interpolation and data-binding.

Answer 3

Prima è necessario verificare se la risposta è un arraybuffer, se lo è, convertirlo in base 64. Inoltre è possibile utilizzare setattribute da assegnare.