Angularjs白色列表YouTube URL的iFrame

Question

app.js：

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

无论我尝试什么，我都会得到"错误：$ interpaly：noconcat多个表达式" iframe的错误。我缺少什么？

确切的错误URL：https://docs.angularjs.org/error/$interpolate/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

Answer 1

使用data-ng-src，如下所示：

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

在这里检查运行plunk：

Plunk DEMO

Answer 2

，因为SCE滤波器不会在视图上应用。因此插值误差

这是plunkr上的2行代码...

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

每次工作:)