Question

我有这个角度代码：

$scope.searchTracks = function(text) {
    Search.search.get({
        text: text
    }, function(data) {
        $scope.tracks = data;
    })
}

在我的模板中：

<div ng-repeat="track in tracks">
  <p>{{ track.href }}</p>
  <audio src="{{ track.href }}"></audio>
</div>

在<p>我看到了我的链接，但<audio代码出现此错误：

错误：$ interpolate：interr插值错误

为什么呢？ track.href示例：

https://0.s3.envato.com/files/91351865/preview.mp3

更新：

在Chrome控制台中，我看到此错误： https://docs.angularjs.org/error/ $ SCE / insecurl P0 = HTTPS：？％2F％2F0.s3.envato.com％2Ffiles％2F106073010％2Fpreview.mp3

也许我收到此错误，因为我的网址是https？完整错误：

http://errors.angularjs.org/1.3.15/$interpolate/interr?p0=%5B%5B%20track.href%20%5D%5D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252F0.s3.envato.com%252Ffiles%252F91351865%252Fpreview.mp3
R/<@http://soundizer.local/vendor/js/libs.js:11:417
v@http://soundizer.local/vendor/js/libs.js:93:110
p/c<@http://soundizer.local/vendor/js/libs.js:114:321
g/<@http://soundizer.local/vendor/js/libs.js:94:145
Oa/<.compile/<.pre@http://soundizer.local/vendor/js/libs.js:73:479
$@http://soundizer.local/vendor/js/libs.js:75:197
B@http://soundizer.local/vendor/js/libs.js:64:66
g@http://soundizer.local/vendor/js/libs.js:56:335
g@http://soundizer.local/vendor/js/libs.js:56:352
g@http://soundizer.local/vendor/js/libs.js:56:352
g@http://soundizer.local/vendor/js/libs.js:56:352
g@http://soundizer.local/vendor/js/libs.js:56:352
D/<@http://soundizer.local/vendor/js/libs.js:55:444
P/<@http://soundizer.local/vendor/js/libs.js:57:322
k@http://soundizer.local/vendor/js/libs.js:61:322
ne</<.compile/</<@http://soundizer.local/vendor/js/libs.js:239:428
Pe/this.$get</n.prototype.$watchCollection/<@http://soundizer.local/vendor/js/libs.js:127:291
Pe/this.$get</n.prototype.$digest@http://soundizer.local/vendor/js/libs.js:128:354
Pe/this.$get</n.prototype.$apply@http://soundizer.local/vendor/js/libs.js:131:291
l@http://soundizer.local/vendor/js/libs.js:86:238
M@http://soundizer.local/vendor/js/libs.js:90:342
wf/</F.onload@http://soundizer.local/vendor/js/libs.js:91:367

Answer 1

添加$ sce以注入SCE提供程序并使用$ sce.trustAsResourceUrl方法设置音频URL。见https://docs.angularjs.org/api/ng/service/$sce

在角度代码中添加此

$scope.tracks = data;
$sce.trustAsResourceUrl($scope.tracks.href);

另见： http://jsbin.com/kegomivole/1/edit?html,js,output

Answer 2

由于您正在等待Angular对其进行插值，因此您需要使用ng-src而不仅仅是src：

<audio ng-src="{{ track.href }}"></audio>

编辑：

看起来您尝试加载的资源正在打破Same Origin Policy，我认为它有不同的域/端口/协议。

要解决此问题，您有两个选择：

1 - 您可以将此类网址列入白名单（取自this question）：

angular.module('myApp', []).config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from outer templates domain.
    'https://0.s3.envato.com/files/**'
  ]); 
});

2 - 使用$sce.getTrustedResourceUrl方法。

src属性的角度插值错误

2 个答案: