Wie lege ich das src-Attribut eines Iframes mithilfe einer Variablen in AngularJS fest?

Festlegen eines iframe-src-Attributs mithilfe einer Variablen in AngularJS

Problem:

Festlegen des src-Attributs eines iframes anhand einer Variablen in AngularJS funktioniert nicht, das Attribut bleibt leer.

Auszug aus dem 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>

Lösung:

Das Problem liegt in der fehlenden Definition der Funktion „trustSrc“ im Controller. Um das src-Attribut mithilfe einer Variablen festzulegen, müssen Sie den $sce-Dienst von AngularJS verwenden, um der URL zu vertrauen:

<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>

Durch das Einfügen des $sce-Dienstes und die Verwendung von „trustAsResourceUrl“ stellen Sie sicher, dass die URL vertrauenswürdig ist wird als vertrauenswürdig behandelt und kann als src-Attribut des Iframes festgelegt werden.

Das obige ist der detaillierte Inhalt vonWie lege ich das src-Attribut eines Iframes mithilfe einer Variablen in AngularJS fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!