CODEWITHSUNDEEP
javascriptangularjs
user4488093
user4488093

Reputation:

Angular Interpolation Error for src attribute

I have this angular code:

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

And in my template:

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

In <p> i see my link, but get this error for <audio tag:

Error: $interpolate:interr Interpolation Error

Why? track.href example:

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

UPDATE:

In chrome console i see this error: https://docs.angularjs.org/error/$sce/insecurl?p0=https:%2F%2F0.s3.envato.com%2Ffiles%2F106073010%2Fpreview.mp3

Maybe i get this error because my url with https? Full error:

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

Upvotes: 1

Views: 2291

Answers (2)

Reena
Reena

Reputation: 1119

Add $sce to inject the SCE provider and use the $sce.trustAsResourceUrl method to set audio Url. See this https://docs.angularjs.org/api/ng/service/$sce

In your angular code add this

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

Also see this : http://jsbin.com/kegomivole/1/edit?html,js,output

Upvotes: 3

Omri Aharon
Omri Aharon

Reputation: 17064

Since you're waiting on Angular to interpolate this, you need to use ng-src instead of just src:

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

Edit:

It looks like the resource you're trying to load is breaking the Same Origin Policy, I assume it has a different domain/port/protocol.

To overcome this, you have 2 options:

1 - You can whitelist the URL like this (taken from 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 - Use $sce.getTrustedResourceUrl method.

Upvotes: 2

Related Questions