AngularJS白名單YouTube網址iframe的

App.js：AngularJS白名單YouTube網址iframe的

(function() { 
    var app = angular.module("RandomAnimeApp", []).config(function($sceDelegateProvider) { 
     $sceDelegateProvider.resourceUrlWhitelist([ 
      'self', 
      '*://www.youtube.com/**' 
     ]); 
    }); 
}());

控制器：

(function() { 
    var app = angular.module("RandomAnimeApp"); 

    var ListController = function($scope, $http, $window, $timeout, $sce) { 
     //stuff and things 
    }; 

    app.controller("ListController", ["$scope", "$http", "$window", "$timeout", "$sce", ListController]) 
}());

查看：

<iframe itemprop="trailer" src="about:blank" data-ng-src="https://www.youtube.com/embed/{{ a.source }}?wmode=opaque&amp;showinfo=0&amp;autohide=1&amp;rel=0&amp;iv_load_policy=3&amp;enablejsapi=1"></iframe>

哪裏a.source等於一個YouTube視頻ID 。

無論我嘗試什麼，我都不斷收到iframe的「錯誤：$ interpolate：noconcat 多個表達式」錯誤。我錯過了什麼？

確切的錯誤地址：https://docs.angularjs.org/error/ $內插/ noconcat P0 = HTTPS：？％2F％2Fwww.youtube.com％2Fembed％2F％7B％7B％20a.source％20％7D％7D％3Fwmode％3Dopaque％26showinfo ％3D0％26autohide％3D1％26rel％3D0％26iv_load_policy％3D3％26enablejsapi％3D1

謝謝。

來源

2017-09-23 Kyle Hawk

使用數據-NG-SRC，如下圖所示：

data-ng-src="{{'https://www.youtube.com/embed/+a.source+'?wmode=opaque&amp;showinfo=0&amp;autohide=1&amp;rel=0&amp;iv_load_policy=3&amp;enablejsapi=1'"

檢查運行Plunk在這裏：

Plunk DEMO

來源

2017-09-23 12:52:03

像魅力一樣工作。很容易在我的ng-repeat中實現（它有多種來源）。謝謝。 –

快樂幫助你！ –

由於SCE過濾器未應用於視圖。因此，插值誤差

這裏是規則對plunkr的2線...

var videoUrl = 'https://www.youtube.com/watch?v=bs_Lv7EeoZQ'; 
     videoUrl = videoUrl.replace("watch?v=", "embed/"); 
     $scope.videoUrl = $sce.trustAsResourceUrl(videoUrl)

屢試不爽:)

來源

2017-09-23 06:18:30

謝謝你的回答！這當然是很好的知道;但是，Varun的答案對於我在ng-repeat內部實現起來更容易。再次感謝！ –

AngularJS白名單YouTube網址iframe的

回答

相關問題