javascript - AngularJS 多个表达式在插值中与 URL 连接

Question

我知道这很长，但请耐心等待。这个问题很容易理解，只需要写一些文章就可以完全解释清楚。

现在我收到这个错误

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

我已经阅读了文档中的所有内容，但仍然找不到解决我的问题的方法。

我在私有(private)在线资源上使用 $http.get，该资源具有类似于 json 文件格式的数据(因此我无法修改数据)。数据如下所示:

...
"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 插入到嵌入 YouTube 视频的 HTML iframe 中。在我的 controller.js 文件中，我在 $http.get 之后设置了 promise 对象

$http.get('privatesource').success(function(data) {
  $scope.videoList = data.items;
});

所以现在变量“$scope.videoList”被映射到data.items，里面有很多视频元素。在我的 HTML 文件中，我可以使用

检索每个视频的 videoID

<ul class="videos">
  <li ng-repeat="video in videoList">
    <span>{{video.id.videoID}}</span>
  </li>
</ul>

这会列出所有视频 ID。但是如果我尝试将这些值连接到一个 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>

有没有办法可以将视频 ID 插入到 youtube URL 中？我已经尝试使用 $sceDelegateProvider 加入白名单，但它仍然不起作用

$sceDelegateProvider.resourceUrlWhitelist([
  'self',
  'https://www.youtube.com/**']);

感谢任何帮助。谢谢!

Answer 1

@tasseKATT 的答案(不需要 Controller 函数)的替代方法是直接在表达式中使用 字符串连接 过滤器:

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 图标 Sprite 时特别有用，这需要您在 SVG use 标签上使用 xlink:href 属性 - 这受制于相同的 SCE 规则。在我需要使用 sprite 的任何地方重复 Controller 功能似乎很愚蠢，所以我改用 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>

注意:我之前只尝试过在表达式中进行简单的字符串连接。然而，这导致了一些意想不到的行为，浏览器会在 Angular 有机会解析它并替换为真正的 href 之前解释该表达式。由于 use 标签的 xlink:href 没有等效的 ng-src 我选择了过滤器，这似乎已经解决了这个问题。