Angular JS 处理 Ng-Repeated HTML5 Video &$SCE

问题描述

JSfiddle 在这里:http://jsfiddle.net/TegFf/73/

JSfiddle here: http://jsfiddle.net/TegFf/73/

从此答案，我了解 Angular 1.2 附带启用了严格上下文转义 (SCE).这会影响在 HTML5 视频中使用 ng-src 的表达式解析器.我知道如果我将 $sce.trustAsResourceUrl(videoURL) 包裹在我的每个视频源周围，那么 Angular 会正常播放它们.但是，我从 API 获取了一个视频源列表.循环遍历数组中的项目，将每个源分配为 $sce.trustAsResourceUrl，然后在我的视图中遍历该新数组对我来说成本很高.

From this answer, I understand Angular 1.2 ships with Strict Contextual Escaping (SCE) enabled. This affects the parser of expressions using ng-src with an HTML5 video. I understand that if I wrap $sce.trustAsResourceUrl(videoURL) around each of my video sources, then Angular will play them as normal. However, I am getting a list of video sources back from an API. It is expensive for me to loop over item in the array, assign each source as a $sce.trustAsResourceUrl, and then loop over that new array in my view.

将我的所有视频源指定为受信任而无需遍历所有视频源的最有效方法是什么?我可以预先将所有视频源指定为 $sce 信任吗?

What is the most efficient way of assigning all my video sources as trusted without having to loop over all of them? Can I assign all video sources to be $sce trusted beforehand?

推荐答案

看起来您想要的是将提供这些视频的域列入白名单.您可以使用 $sceDelegateProvider

It looks like what you want is to whitelist the domain these videos will be served from. You can do this using $sceDelegateProvider

您需要做的就是添加一些配置，如下所示:

All you need to do is add a bit of config as follows:

app.config(function($sceDelegateProvider) {
 $sceDelegateProvider.resourceUrlWhitelist([
   // Allow same origin resource loads.
   'self',
   // Allow loading from our assets domain.  Notice the difference between * and **.
   'http://media.w3.org/**']);
});

我已经用一个工作演示更新了你的小提琴:http://jsfiddle.net/spikeheap/ACJ77/1/

I've updated your fiddle with a working demo: http://jsfiddle.net/spikeheap/ACJ77/1/

这篇关于Angular JS 处理 Ng-Repeated HTML5 Video &$SCE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！