Comment faire confiance et définir l'attribut iFrame Src à partir d'une variable dans AngularJS ?

Définition de l'attribut iFrame Src à partir d'une variable dans AngularJS

Dans AngularJS, vous pouvez rencontrer des difficultés lorsque vous tentez de définir l'attribut src d'un iFrame à partir d'une variable. Pour résoudre ce problème, nous devons nous plonger dans le code fourni :

<br>function AppCtrl($scope) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$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 );

}

Copier après la connexion

}

Le nœud du problème réside dans l'absence de la fonction trustSrc référencée dans l'attribut ng-src. Vous devez injecter le service $sce dans le contrôleur pour utiliser la méthode trustAsResourceUrl pour nettoyer la chaîne d'URL.

<br>function AppCtrl($scope, $sce) { // $sce injecté service</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// ...

$scope.setProject = function (id) {
  $scope.currentProject = $scope.projects[id];
  $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
  console.log( $scope.currentProject );
  console.log( $scope.currentProjectUrl );

}

Copier après la connexion