AngularJS 多个表达式与 URL 插值连接 [英] AngularJS multiple expressions concatenating in interpolation with a URL

问题描述

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

现在我收到此错误

错误:[$interpolate:noconcat] 插值时出错:严格上下文转义不允许在需要可信值时连接多个表达式的插值.请参阅 http://docs.angularjs.org/api/ng.$sce

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

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

<预><代码>...项目": [{"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

<li ng-repeat="videoList 中的视频"><span>{{video.id.videoID}}</span>

这会列出所有的视频 ID.但是，如果我尝试将这些值连接到一个 URL，例如 https://youtube.com/embed/，则它不起作用.

<iframe id="ytplayer" type="text/html" width="640" height="360"ng-src="https://www.youtube.com/embed/{{video.id.videoId}}"frameborder="0" allowfullscreen></iframe>

有没有办法将 videoID 插入到 youtube URL 中?我已经尝试使用 $sceDelegateProvider 将其列入白名单，如下所示，但它仍然不起作用

$sceDelegateProvider.resourceUrlWhitelist(['自己'，'https://www.youtube.com/**']);

感谢任何帮助.谢谢！

解决方案

从 1.2 开始，您只能将一个表达式绑定到 *[src]、*[ng-src] 或 action.你可以阅读更多关于它这里.

试试这个:

在控制器中:

$scope.getIframeSrc = function (videoId) {返回https://www.youtube.com/embed/"+ videoId；};

HTML:

ng-src="{{getIframeSrc(video.id.videoId)}}"

请注意，您仍然需要将其列入白名单，否则您将获得来自 $sceDelegate 政策不允许的 url 的锁定加载资源.

I know this is long, but please bear with me. The problem is easy to understand, just takes some writing to fully explain it.

Right now I'm getting this error

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

I've done all the reading in the documentation, but I still can't find a workaround for my problem.

I'm using $http.get on a private online source that has data that is similar to the form of a json file (so I can't modify the data). The data looks like this:

...
"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"
       },
    },
...

I'm trying to interpolate the videoId of each item into my HTML iframe that embeds the YouTube video. In my controller.js file, I'm setting the promise object after the $http.get as such

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

So now the variable "$scope.videoList" is mapped to data.items, which has a lot of video elements. In my HTML file, I can retrieve the videoID of each video by using

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

and this lists all the videoID's. But if I try to concatenate these values to a URL, like https://youtube.com/embed/, it does not work.

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

Is there a way that I can get the videoID to be interpolated into the youtube URL? I've tried whitelisting by using the $sceDelegateProvider as follows but it still does not work

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

Any help is appreciated. Thanks!

解决方案

Since 1.2 you can only bind one expression to *[src], *[ng-src] or action. You can read more about it here.

Try this instead:

In Controller:

$scope.getIframeSrc = function (videoId) {
  return 'https://www.youtube.com/embed/' + videoId;
};

HTML:

ng-src="{{getIframeSrc(video.id.videoId)}}"

Note that you still need to whitelist it as you have, or you will get locked loading resource from url not allowed by $sceDelegate policy.

这篇关于AngularJS 多个表达式与 URL 插值连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！