web-dev-qa-db-fra.com

expression angularjs dans la balise html <object>

J'ai une portée telle que $scope.doc_details dans mon contrôleur angularjs et je veux l'utiliser pour afficher un fichier pdf à l'aide d'une balise, comme ceci:

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

mais cela 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 quand je viens de l'afficher en utilisant <span>{{doc_details.file_url}}</span>, il affiche la valeur.

javascripthtml5angularjs
17
AT_

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 retardera la création de l'élément object jusqu'à ce que l'URL soit disponible pour nous depuis l'étendue (en supposant qu'elle soit déjà présente - sinon vous voudriez $watch l'attribut src de l'étendue jusqu'à ce qu'il soit disponible).

Ici c'est dans un violon .

20
satchmorun

À partir de 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>

Voir la sectionngAttr pour la liaison à des attributs arbitraires section sur AngularJS: Interpolation et liaison de données .

32
Sean Leather

Le navigateur essaie de traiter la chose avant qu'AngularJS ne remplace l'expression angulaire par quelque chose que le navigateur peut utiliser, ce qui provoque une erreur.

L'ajout d'un ng-cloak corrige le problème.

0
Ivan Rubinson