AngularJS ng-src à l'intérieur de l'iframe

J'ai un problème à l'aide de ng-src à l'intérieur d'un iframe. J'ai besoin pour ce faire:

<div class="tab-content">
        <ul class="nav nav-tabs" ng-repeat="document in issues.Document">
            <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
                <iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%"></iframe>                    
            </div>
        </ul>
    </div>

RÉSULTAT:

<iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%" src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}"></iframe>

Je sais que le problème est $sce, qui est une protection contre les attaques de type XSS, et que le lien doit être ajouté à la liste blanche... Donc il fonctionne quand je fais cela.

<ul class="nav nav-tabs" ng-repeat="document in issues.Document">
    <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
         <iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>                    
     </div>
</ul>

Et je définir à l'intérieur du contrôleur:

$rootScope.someUrl = $sce.trustAsResourceUrl('http://192.168.223.110/cat/files/incoming/12345_3232ASD_pero.pdf');

Mais je ne peux pas le faire comme ça parce que je suis en boucle avec ng-repeat, de sorte que le lien est généré dynamiquement. Il a besoin d'être lisible à partir de la base de données!

InformationsquelleAutor Tindtrelle | 2014-06-11

79

Vous pouvez utiliser un filtre à la place:

HTML:
```
<iframe src="{{yourURL | trustAsResourceUrl}}"></iframe>
```
où "yourURL" est l'URL de l'iframe et "trustAsResourceUrl' est le filtre et est défini comme dans certains module(comme par exemple. filtres-module) comme:

JS:
```
angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])
```
Et vous pouvez utiliser ce filtre dans tous les iframes et les autres éléments imbriqués dans votre application.
Ce filtre vous permettra de prendre soin de toutes les url que vous avez besoin de faire confiance juste en ajoutant le filtre.
- Ok, cela fonctionne si j'ai un seul..Mais ça ne fonctionne pas à l'intérieur de ng-repeat :/ {{apiUrl}}{{document.annuaire}}/{{document.name}}.{{document.type}} je suis la création de lien comme ça..
- Pouvez-vous créer un violon pour cela. Ou de fournir un extrait de code. Je ne suis pas en mesure de voir pourquoi cela ne fonctionne pas.
- Oh, désolé, vous n'avez probablement pas vu ma réponse 🙂 le problème était que je n'étais pas de l'écriture de l'url sur le droit chemin.. 🙂 le filtre fonctionne parfaitement, merci! 🙂
- Je pense que c'est mieux pour l'utilisateur ng-src de l'iframe, c'est le 'src' envoie de fausses demandes vers le serveur avant angulaire est lodaded.
- oui, d'accord. Essentiellement, il tente de récupérer l'iframe avec des accolades expression qui encodés à certains laid url 🙂
InformationsquelleAutor Kop4lyf
4

Ok j'ai trouvé quel était le problème..
Merci pour ce filtre, il travaille maintenant 🙂

Tout ce que j'avais à faire était de créer ng-src ce lien:
```
<iframe ng-src="{{apiUrl+document.directory + '/' + document.name + '.'+ document.type   | trustAsResourceUrl}}"
        height="100%" width="100%">
</iframe>
```
Peut-être que cela aide à quelqu'un! 🙂

InformationsquelleAutor Tindtrelle

Que ce Kop4lyf dit
vous avez besoin d'ajouter un filtre en js

//Create a filter for trust url
    app.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

et de sortie ih html

ng-src="{{x.title.rendered | trustAsResourceUrl}}"

Certains autres de filtre :

//Create a filter for trust html
    app.filter('trustAsHtml', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
}]);

InformationsquelleAutor Abdelhadi Abdo

Vous devez vous connecter pour publier un commentaire.