如何在 AngularJS 中信任並設定變數的 iFrame Src 屬性？

在AngularJS 中從變數設定iFrame Src 屬性

在AngularJS 中，嘗試設定iFrame 的src 屬性時可能會遇到挑戰來自一個變數。為了解決這個問題，我們必須深入研究提供的程式碼：

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

}

}

> ;

問題的癥結在於ng-src 屬性中缺少引用的trustSrc 函數。您需要將 $sce 服務注入到控制器中，以利用 trustAsResourceUrl 方法來清理 URL 字串。

<br>function AppCtrl($scope, $sce) { // 注入$sce service<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 );

}

}

模板內：

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

透過使用trustAsResourceUrl，您可以安全地在src 屬性中設定URL。

以上是如何在 AngularJS 中信任並設定變數的 iFrame Src 屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！