Bagaimana untuk Mempercayai dan Menetapkan Atribut iFrame Src daripada Pembolehubah dalam AngularJS?

Menetapkan Atribut iFrame Src daripada Pembolehubah dalam AngularJS

Dalam AngularJS, anda mungkin menghadapi cabaran semasa cuba menetapkan atribut src iFrame daripada pembolehubah. Untuk menangani isu ini, kita mesti menyelidiki kod yang disediakan:

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

}

}

Inti isu terletak pada ketiadaan fungsi trustSrc yang dirujuk dalam atribut ng-src. Anda perlu menyuntik perkhidmatan $sce ke dalam pengawal untuk menggunakan kaedah trustAsResourceUrl untuk membersihkan rentetan URL.

<br>function AppCtrl($scope, $sce) { // Injected $sce perkhidmatan</p>
<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 );

}

}

Dalam templat:

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

Dengan menggunakan trustAsResourceUrl, anda boleh menetapkan URL dengan selamat dalam atribut src.

Atas ialah kandungan terperinci Bagaimana untuk Mempercayai dan Menetapkan Atribut iFrame Src daripada Pembolehubah dalam AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!