$ sce: itype Попытка доверять нестрочному значению в содержимом, требующем строку: Context: resourceUrl

Question

Я хочу играть песни, хранящиеся на моем сервере парусов. Путь - http://localhost:4000/images/123.mp3.

В передней части я использую ng-repeat для перечисления этих песен с сервера.

<div ng-repeat="tones in ringTones track by $index"> 
     <div> 
     <i ng-show="playpause" class="fa fa-play-circle" ng-click="playpause=!playpause" onclick="plays(event);"><audio id="audio_{{$index}}" ng-src="tones.tonePath"></audio></i> 
     <i ng-show="!playpause" class="fa fa-pause" ng-click="playpause=!playpause" onclick="stop(event);"></i></div> 

</div> 

Этого источник звук вызывает проблемы внешних ресурсов

<audio ng-src="tones.tonePath"></audio> 

углового контроллер, я использую $ SCE

$http.get("http://localhost:4000/songs/find").success(function(data){ 
     $rootScope.ringTones=data; 
     $rootScope.ringTones.push($sce.trustAsResourceUrl(data[0])); 
}).error(function(data){ 
        console.log('ERROR'); 
}); 

Ошибка:

Error: [$sce:itype] Attempted to trust a non-string value in a 
    content requiring a string: Context: resourceUrl 

Без использования $ sce, которые вызывают

Error: [$interpolate:interr] Can't interpolate: tones.tonePath 
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL 

Это мой JSON от сервера

[{ 
    "toneName": "2", 
    "aboutTone": "2", 
    "duration": 2, 
    "tonePath": "http://localhost:4000/images/234.mp3", 
    "createdAt": "2015-08-03T15:40:58.227Z", 
    "updatedAt": "2015-08-03T15:40:58.227Z", 
    "id": "55bf8b8a77efb94b32b158c0" 
    }, 
    { 
    "toneName": "3", 
    "aboutTone": "3", 
    "duration": 3, 
    "tonePath": "http://localhost:4000/images/123.mp3", 
    "createdAt": "2015-08-03T15:45:16.120Z", 
    "updatedAt": "2015-08-03T15:45:16.120Z", 
    "id": "55bf8c8c77efb94b32b158c1" 
    } 
] 

Тогда как играть внешний mp3 в моем нг-повтора. Помоги мне.

Answer 1

Я нашел решение: External resource not being loaded by AngularJs

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

Затем указать фильтр в нг-Src:

<audio 
     ng-src="{{tones.tonePath | trusted}}" /> 
    </audio> 

Спасибо за ответ.

Answer 2

//first Take data from api 

$scope.Data= JSLINQ(data.Data).Select(function (Item) { return Item; })      

//Map data as trustable to scope 
$scope.Data.items.map(function (i) { 
        i.Header1 = $sce.trustAsHtml(i.Header1);  
       }); 

//UI bind modal data 

<p ng-bind-html="x1.Header1 " ng-show="x1.Header1 != null"></p>