angularjs expression dans html <object> tag

J'ai un champ comme $scope.doc_details dans mon angularjs contrôleur, 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 il n'est pas chargé dans le navigateur, dans ma console chromée, 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 à l'aide <span>{{doc_details.file_url}}</span> de montrer la valeur.

Je parie que l'objet de l'évaluation de la chaîne avant angulaire a une chance de remplacer les données finales.
toute solution pour cela?

OriginalL'auteur AT_ | 2013-02-15

  1. 20

    Le problème ici est que le navigateur est de voir

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

    dans les DOM avant Angulaire de la compile, et, évidemment, {{doc_details.file_url}} n'est pas une URL valide.

    Directives peuvent être votre ami ici.

    De dire que nous voulons écrire:

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

    Nous pouvons créer un très directive 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 permettra de différer la création de la object élément jusqu'à ce que nous avons réellement l'URL disponible à partir de la portée (en supposant que c'est déjà là - sinon, vous voulez $watch la src l'attribut dans le champ d'application jusqu'à ce qu'il est devenu disponible).

    Ici c'est dans un violon.

    C'est pour ça que ça ne fonctionne pas, Merci beaucoup
    Rencontré ce problème lors de l'utilisation angular2. Toute réflexion sur la façon d'utiliser les données de liaison avec <object> tag?

    OriginalL'auteur

  2. 32

    De AngularJS 1.1.4, vous pouvez utiliser le ng-attr- préfixe pour les data attribut:

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

    Voir le ngAttr pour la liaison à l'arbitraire des attributs section sur AngularJS: Interpolation et de liaison de données.

    Cela ne fonctionne pas avec IE. IE ne vous permettra pas de changer l'attribut de données après qu'il a été chargé. Vous obtiendrez un message indiquant que l'accès est refusé. Vous devez le charger via une directive plutôt que de retarder la liaison.
    est-ce encore le cas aujourd'hui? Je ne peux pas semblent facilement google "objet élément html angularjs" je reçois un tas de résultats sur la transmission des objets de logiciel et non de l'élément html d'objets. Je suis étrange problème avec mon code. Une nouvelle réponse à cette ou un lien vers des docs va aider merci 🙂
    C'est encore le cas avec IE 11.

    OriginalL'auteur

  3. 0

    Le navigateur essaie de traiter la chose avant d'AngularJS remplacé le angulary expression avec quelque chose que le navigateur peut travailler avec, ce qui provoque une erreur.

    L'ajout d'un ng-cloak résout le problème.

    En fait, on dirait que cela ne fonctionne pas sur MS Bord.

    OriginalL'auteur

  4. -3

    Vous devez d'abord vérifier si la réponse est un arraybuffer, si elle l'est, le convertir en base 64. Vous pouvez également utiliser setattribute à attribuer.

    angularjs expression dans html <object> tag

    Il est préférable de prendre une capture d'écran. Pour prendre une capture d'écran sur Windows, appuyez sur la touche d'Impression Écran, puis de le coller dans un programme de retouche d'image comme de la Peinture en appuyant sur CTRL+V.

    OriginalL'auteur