AngularJS多重expression式与URL插值连接
我知道这很长，但请忍受我。 这个问题很容易理解，只需要一些写作来充分解释它。
现在我得到这个错误
Error: [$interpolate:noconcat] Error while interpolating: Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required. See http://docs.angularjs.org/api/ng.$sce 我已经在文档中完成了所有的阅读，但我仍然无法find解决我的问题的方法。
我正在使用$ http.get在一个私人的在线资源，其数据类似于json文件的forms（所以我不能修改数据）。 数据如下所示：
... "items": [ { "kind": "youtube#searchResult", "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/A7os41NAa_66TUu-1I-VxH70Rp0\"", "id": { "kind": "youtube#video", "videoID": "MEoSax3BEms" }, }, { "kind": "youtube#searchResult", "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/VsH9AmnQecyYBLJrl1g3dhewrQo\"", "id": { "kind": "youtube#video", "videoID": "oUBqFlRjVXU" }, }, ...
我试图插入每个项目的videoId到embeddedYouTubevideo的HTML iframe中。 在我的controller.js文件中，我在$ http.get之后设置了promise对象
$http.get('privatesource').success(function(data) { $scope.videoList = data.items; });
所以现在variables“$ scope.videoList”映射到data.items，它有很多video元素。 在我的HTML文件中，我可以通过使用检索每个video的videoID
<ul class="videos"> <li ng-repeat="video in videoList"> <span>{{video.id.videoID}}</span> </li> </ul>
这列出了所有的videoID。 但是，如果我尝试将这些值连接到url（如https://youtube.com/embed/） ，则无法正常工作。
<div ng-repeat="video in videoList"> <iframe id="ytplayer" type="text/html" width="640" height="360" ng-src="https://www.youtube.com/embed/{{video.id.videoId}}" frameborder="0" allowfullscreen></iframe> </div>
有没有一种方法可以将videoID插入到YouTubeurl中？ 我已经尝试使用$ sceDelegateProvider作为白名单如下，但它仍然无法正常工作
$sceDelegateProvider.resourceUrlWhitelist([ 'self', 'https://www.youtube.com/**']);
任何帮助表示赞赏。 谢谢！
自1.2以来，只能将一个expression式绑定到* [src]，* [ng-src]或动作。 你可以在这里阅读更多。
试试这个：
在控制器中：
$scope.getIframeSrc = function (videoId) { return 'https://www.youtube.com/embed/' + videoId; };
HTML：
ng-src="{{getIframeSrc(video.id.videoId)}}"
请注意，您仍然需要将其列入白名单，否则您将locked loading resource from url not allowed by $sceDelegate policy 。
@ tasseKATT的答案（不需要控制器函数）的替代方法是直接在expression式中使用string连接filter：
angular.module('myApp') .filter('youtubeEmbedUrl', function ($sce) { return function(videoId) { return $sce.trustAsResourceUrl('http://www.youtube.com/embed/' + videoId); }; });
<div ng-src="{{ video.id.videoId | youtubeEmbedUrl }}"></div>
在使用SVG图标精灵时，我发现这个特别有用，它要求您使用SVG use标签上的xlink:href属性 – 这受到相同的SCE规则的约束。 重复控制器的function，我需要使用一个精灵似乎很傻，所以我使用了filter的方法。
angular.module('myApp') .filter('svgIconCardHref', function ($sce) { return function(iconCardId) { return $sce.trustAsResourceUrl('#s-icon-card-' + iconCardId); }; });
<svg><use xlink:href="{{ type.key | svgIconCardHref }}"></use></svg>
注意：我以前在expression式中试过简单的string连接。 然而，这导致了一些意外的行为，在Angular有机会parsing它并用真正的href取代之前，浏览器会解释expression式。 由于use标签的xlink:href没有ng-src等价物，我select了filter，这似乎解决了这个问题。
在控制器中：
app.filter('trustAsResourceUrl', ['$sce', function ($sce) { return function (val) { return $sce.trustAsResourceUrl(val); }; }]);
在html中：
ng-src="('https://www.youtube.com/embed/' + video.id.videoId) | trustAsResourceUrl"
