J'essaie de définir l' src
attribut d'un iframe à partir d'une variable et je ne peux pas le faire fonctionner ...
Le balisage:
<div class="col-xs-12" ng-controller="AppCtrl">
<ul class="">
<li ng-repeat="project in projects">
<a ng-click="setProject(project.id)" href="">{{project.url}}</a>
</li>
</ul>
<iframe ng-src="{{trustSrc(currentProject.url)}}">
Something wrong...
</iframe>
</div>
controllers / app.js:
function AppCtrl ($scope) {
$scope.projects = {
1 : {
"id" : 1,
"name" : "Mela Sarkar",
"url" : "http://blabla.com",
"description" : "A professional portfolio site for McGill University professor Mela Sarkar."
},
2 : {
"id" : 2,
"name" : "Good Watching",
"url" : "http://goodwatching.com",
"description" : "Weekend experiment to help my mom decide what to watch."
}
};
$scope.setProject = function (id) {
$scope.currentProject = $scope.projects[id];
console.log( $scope.currentProject );
}
}
Avec ce code, rien n'est inséré dans l' src
attribut iframe . C'est juste vide.
Mise à jour 1:
j'ai injecté la $sce
dépendance dans AppCtrl et $ sce.trustUrl () fonctionne maintenant sans lancer d'erreurs. Cependant, il retourne TrustedValueHolderType
que je ne sais pas comment utiliser pour insérer une URL réelle. Le même type est renvoyé si j'utilise $ sce.trustUrl () à l'intérieur des accolades d'interpolation dans l'attribut src="{{trustUrl(currentProjectUrl))}}"
ou si je le fais à l'intérieur du contrôleur lors de la définition de la valeur de currentProjectUrl. Je l'ai même essayé avec les deux.
Mise à jour 2: j'ai compris comment renvoyer l'URL du trustedUrlHolder à l'aide de .toString () mais quand je le fais, il lance l'avertissement de sécurité lorsque j'essaie de le passer dans l'attribut src.
Mise à jour 3: cela fonctionne si j'utilise trustAsResourceUrl () dans le contrôleur et le transmets à une variable utilisée dans l'attribut ng-src:
$scope.setProject = function (id) {
$scope.currentProject = $scope.projects[id];
$scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
console.log( $scope.currentProject );
console.log( $scope.currentProjectUrl );
}
Mon problème semble être résolu par cela, même si je ne sais pas trop pourquoi.