JS angulaire : Comment définir un attribut d’iframe src d’une variable

Question

Je suis en train de régler le src d'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'iframe de l' src d'attribut. C'est juste vide.

Mise à jour 1: J'ai injecté le $sce de dépendance dans le AppCtrl et $sce.trustUrl() fonctionne maintenant sans provoquer des erreurs. Toutefois, il retourne TrustedValueHolderType dont je ne suis pas sûr de la façon de les utiliser pour insérer une URL réelle. Le même type est retourné si j'utilise $sce.trustUrl() à l'intérieur de l'interpolation des accolades 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. J'ai même essayé avec les deux.

Mise à jour 2: J'ai trouvé comment afficher l'url de la trustedUrlHolder à l'aide .toString() mais lorsque je fais cela, il lance l'avertissement de sécurité lorsque j'essaie de la passer dans l'attribut src.

Mise à jour 3: Il fonctionne si j'utilise trustAsResourceUrl() dans le contrôleur et le passer à une variable utilisée à l'intérieur de la ng-attribut 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 la présente, bien que je ne suis pas tout à fait sûr pourquoi.

Answer 1

Vous devez également $sce.trustAsResourceUrl ou il n'ouvrira pas le site web à l'intérieur de l'iframe :

angular.module('myApp', [])
    .controller('dummy', ['$scope', '$sce', function ($scope, $sce) {

    $scope.url = $sce.trustAsResourceUrl('https://www.angularjs.org');

    $scope.changeIt = function () {
        $scope.url = $sce.trustAsResourceUrl('https://docs.angularjs.org/tutorial');
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="dummy">
    <iframe ng-src="{{url}}" width="300" height="200"></iframe>
    <br>
    <button ng-click="changeIt()">Change it</button>
</div>