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。

无论我尝试什么，我都会得到＆＃34;错误：$ interpolate：noconcat 多个表达式＆＃34; iframe的错误。我错过了什么？

完全错误网址：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

因为SCE过滤器未应用于视图。因此插值误差

以下是plunkr ...

上的2行代码

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

每次都有效:)

Answer 2

使用data-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

用于iframe的{AngularJS白名单YouTube网址

2 个答案: