Bagaimana untuk Menetapkan Atribut src iframe Menggunakan Pembolehubah dalam AngularJS?

Menetapkan Atribut iframe src Menggunakan Pembolehubah dalam AngularJS

Masalah:

Menetapkan atribut src iframe daripada pembolehubah dalam AngularJS tidak berfungsi, membiarkan atribut kosong.

Petikan daripada Kod:

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

Penyelesaian:

Isunya terletak pada takrifan fungsi trustSrc yang hilang dalam pengawal. Untuk menetapkan atribut src menggunakan pembolehubah, anda perlu menggunakan perkhidmatan $sce AngularJS untuk mempercayai 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>

Dengan menyuntik perkhidmatan $sce dan menggunakan trustAsResourceUrl, anda memastikan bahawa URL itu dianggap sebagai boleh dipercayai dan boleh ditetapkan sebagai atribut src iframe.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Atribut src iframe Menggunakan Pembolehubah dalam AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!