如何在 AngularJS 中使用變數設定 iframe 的 src 屬性？

在AngularJS 中使用變數設定iframe src 屬性

問題：

從變數設定iframe 的變數設定🎜>

從變數設定iframe 的變數設定中不起作用，將屬性留空。

程式碼摘錄：

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

解：

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

問題在於控制器中缺少trustSrc的定義。要使用變數設定src 屬性，您需要使用AngularJS 的$sce 服務來信任URL：

<code class="html"><iframe  ng-src="{{currentProjectUrl}}">
    <!-- Replace the text with actual content -->
</iframe></code>

透過注入$sce 服務並使用trustAsResourceUrl，您可以確保URL 是被視為可信，可以設定為iframe 的src 屬性。

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