Sto cercando di impostare l' src
attributo di un iframe da una variabile e non riesco a farlo funzionare ...
Il markup:
<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>
controller / 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 );
}
}
Con questo codice, nulla viene inserito nell'attributo iframe src
. È solo vuoto.
Aggiornamento 1:
ho $sce
inserito la dipendenza in AppCtrl e $ sce.trustUrl () ora funziona senza generare errori. Tuttavia restituisce ciò TrustedValueHolderType
che non sono sicuro di come utilizzare per inserire un URL reale. Lo stesso tipo viene restituito se utilizzo $ sce.trustUrl () all'interno delle parentesi graffe di interpolazione nell'attributo src="{{trustUrl(currentProjectUrl))}}"
o se lo faccio all'interno del controller durante l'impostazione del valore di currentProjectUrl. L'ho anche provato con entrambi.
Aggiornamento 2: ho capito come restituire l'URL dall'account TrustedUrlHolder usando .toString () ma quando lo faccio, lancia l'avviso di sicurezza quando provo a passarlo nell'attributo src.
Aggiornamento 3: Funziona se uso trustAsResourceUrl () nel controller e lo passo a una variabile utilizzata all'interno dell'attributo 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 );
}
Il mio problema sembra essere risolto da questo, anche se non sono del tutto sicuro del perché.