javascript - src 属性的 Angular 插值错误

Question

我有这个 Angular 代码:

$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

也许我得到这个错误是因为我的 url 使用 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 以注入(inject) SCE 提供程序并使用 $sce.trustAsResourceUrl 方法设置音频 Url。看这个https://docs.angularjs.org/api/ng/service/$sce

在你的 Angular 代码中添加这个

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

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