Question

我有Angular和$sce处理我的项目，用于显示HTML特殊字符，以及视频播放器链接到我数据库中的视频文件。但我无法{**}}将HTML音频播放器连接到同一数据库中的音频文件。

此HTML有效：

$sce

这是项目HTML：

<audio controls ng-src="https://mydatabase.com/aa6df923">

这不起作用：

<audio controls ng-src="{{audioSource}}">

这也不起作用：

$scope.audioSource = "https://mydatabase.com/aa6df923";

这不起作用：

app.controller('MyController', function($scope, $sce) {
    $scope.audioSource = $sce.trustAsResourceUrl("https://mydatabase.com/aa6df923");
});

不是这一个：

app.controller('MyController', function($scope, $sce) {
    $scope.audioSource = $sce.trustAsResourceUrl("https://mydatabase.com/aa6df923");
    $scope.$apply();
});

最后，此过滤器可用于转义HTML特殊字符，但无法链接音频文件：

$scope.audioSource = "../audio/myFile.mp3";

我错过了什么？

Answer 1

您可以创建一个名为trustAsResourceUrl的新过滤器，其效果与trustAsHtml示例相同。

创建trustAsResourceUrl过滤器：

app.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);
    };
}]);

请注意，您的示例中存在拼写错误 - (与return 之间的function

在模板中使用过滤器：

<audio controls ng-src="{{ audioSource | trustAsResourceUrl }}">

请注意，这会信任您传递给过滤器的每个网址。

如果您只想将域列入白名单，可以在app.config()。

中执行此操作

angular.module('app')
.config(['$sceDelegateProvider', function($sceDelegateProvider) {
  // whitelist resource URLs
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://mydatabase.com/**'
  ]);
}]);

否则，前面示例中的代码应该有效，假设域匹配等。如果这些解决方案无法解决您的问题，那么发布您在控制台中看到的完整错误会很有帮助。

Answer 2

我已经开始弄清楚了。 $scope.audioSource位于函数内部，将其置于新$scope。即，{{audioSource}}和$scope.audioSource位于不同的范围内。我将努力将函数返回到控制器的$scope。

我需要逃脱！ Angular $ sce不处理音频文件的链接（Strict Contextual Escaping）

2 个答案: