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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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 );

}

Salin selepas log masuk

}

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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 );

}

Salin selepas log masuk