AngularJS の変数を使用して iframe の src 属性を設定する方法

AngularJS の変数を使用した iframe の src 属性の設定

問題:

変数からの iframe の src 属性の設定AngularJS では機能せず、属性が空白のままです。

コードからの抜粋:

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

解決策:

問題は、コントローラー内の trustSrc 関数の定義が欠落していることにあります。変数を使用して src 属性を設定するには、AngularJS の $sce サービスを使用して 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>

$sce サービスを挿入し、trustAsResourceUrl を使用することで、URL が信頼できるものとして扱われ、iframe の src 属性として設定できます。

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