Expression angularjs dans html <object> tag

J'ai une portée comme $scope.doc_details dans mon contrôleur angularjs, et je veux l'utiliser pour afficher un fichier pdf en utilisant un tag, comme ceci:

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

Mais il ne se charge pas dans le navigateur, dans ma console Chrome, tout ce que je vois est:

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

Et lorsque je l'affiche simplement en utilisant <span>{{doc_details.file_url}}</span> il montre la valeur.

Le problème ici est que le navigateur voit

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

Dans le DOM avant que Angular ne le compile, et évidemment {{doc_details.file_url}} n'est pas une URL valide.

Les directives peuvent être votre ami ici.

Disons que nous voulons écrire:

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

Nous pouvons créer une directive très simple:

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

Cela différera la création de l'élément d' object jusqu'à ce que nous ayons effectivement l'URL disponible pour nous à partir de la portée (en supposant qu'il existe déjà – sinon, vous souhaitez $watch l'attribut src dans la portée jusqu'à ce qu'il soit disponible).

Ici, c'est dans un violon .

À partir d' AngularJS 1.1.4 , vous pouvez utiliser le préfixe ng-attr- pour l'attribut data :

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

Consultez la section ngAttr pour se lier à des attributs arbitraires sur AngularJS: Interpolation et liaison de données .

Vous devez d'abord vérifier si la réponse est un débitmètre, si c'est le cas, convertissez-le en base 64. Vous pouvez également utiliser setattribute pour attribuer.

Entrez la description de l'image ici