angularjs – $sce：itype尝试信任需要字符串的内容中的非字符串

发布时间：2020-12-17 17:25:17 所属栏目：安全来源：网络整理

导读：我想播放存储在我的sails服务器中的歌曲.路径为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-

我想播放存储在我的sails服务器中的歌曲.路径为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"
  }
]

然后如何在我的ng-repeat中播放外部mp3.帮我.

解决方法

我找到了解决方案
External resource not being loaded by AngularJs

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

然后在ng-src中指定过滤器：

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

谢谢你的回复.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!