Comment définir l'attribut src d'une iframe à l'aide d'une variable dans AngularJS ?

Définition d'un attribut src iframe à l'aide d'une variable dans AngularJS

Problème :

Définition de l'attribut src d'une iframe à partir d'une variable dans AngularJS ne fonctionne pas, laissant l'attribut vide.

Extrait du code :

<code class="javascript">function AppCtrl($scope) {

    // ...

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

    }
}</code>

<code class="html"><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></code>

Solution :

Le problème réside dans la définition manquante de la fonction trustSrc dans le contrôleur. Pour définir l'attribut src à l'aide d'une variable, vous devez utiliser le service $sce d'AngularJS pour faire confiance à l'URL :

<code class="javascript">function AppCtrl($scope, $sce) {

    // ...

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

<code class="html"><iframe  ng-src="{{currentProjectUrl}}">
    <!-- Replace the text with actual content -->
</iframe></code>

En injectant le service $sce et en utilisant trustAsResourceUrl, vous vous assurez que l'URL est traité comme digne de confiance et peut être défini comme attribut src de l'iframe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!