AngularJS の変数から iFrame Src 属性を信頼して設定する方法は?

AngularJS の変数から iFrame Src 属性を設定する

AngularJS で iFrame の src 属性を設定しようとすると、問題が発生する場合があります変数から。この問題に対処するには、提供されたコードを詳しく調べる必要があります:

<pre>
function AppCtrl($scope) {

$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 );

}

}
</pre&gt ;

問題の核心は、ng-src 属性で参照される trustSrc 関数が存在しないことにあります。 URL 文字列をサニタイズするために trustAsResourceUrl メソッドを利用するには、$sce サービスをコントローラーに挿入する必要があります。

<pre>
function AppCtrl($scope, $sce) { // Injected $sce service

// ...

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

}

}
</pre>

テンプレート内:

<pre>
<iframe ng-src=" {{currentProjectUrl}}"> <!--コンテンツ--> </iframe>
</pre>

trustAsResourceUrl を採用することで、src 属性内に URL を安全に設定できます。

以上がAngularJS の変数から iFrame Src 属性を信頼して設定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。