Wie kann ich einem iFrame-Src-Attribut aus einer Variablen in AngularJS vertrauen und es festlegen?

Festlegen des iFrame-Src-Attributs aus einer Variablen in AngularJS

In AngularJS kann es zu Herausforderungen kommen, wenn Sie versuchen, das src-Attribut eines iFrames festzulegen aus einer Variablen. Um dieses Problem zu beheben, müssen wir uns mit dem bereitgestellten Code befassen:

<br>function AppCtrl($scope) {</p>
<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 );

}

}

Der Kern des Problems liegt im Fehlen der Funktion „trustSrc“, auf die im Attribut „ng-src“ verwiesen wird. Sie müssen den $sce-Dienst in den Controller einfügen, um die Methode „trustAsResourceUrl“ zum Bereinigen der URL-Zeichenfolge zu verwenden.

<br>function AppCtrl($scope, $sce) { // $sce eingefügt Service</p>
<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 );

}

}

Innerhalb der Vorlage:

<br><iframe ng-src=" {{currentProjectUrl}}"> <!--content--> </iframe><br>

Durch die Verwendung von trustAsResourceUrl können Sie die URL sicher innerhalb des src-Attributs festlegen.

Das obige ist der detaillierte Inhalt vonWie kann ich einem iFrame-Src-Attribut aus einer Variablen in AngularJS vertrauen und es festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!