angularjs中动态为audio绑定src

上周群里的小伙伴在写项目的时候遇到一个问题，就是怎么在angular中动态的为audio绑定src 。当时我不会我以为和img的src一样呢。但是确实不一样。在博客园中看到了有关于audio绑定src的文章写得还是比较详细的，有兴趣的可以看看。

angular_src

第一： HTML部分

<div class="block_area block_audio" ng-show="model.url">
    <audio controls="controls" ng-click="open()" ng-src="{{model.url}}"></audio>
    <button class="close btn_delete" ng-click="remove()">&times;</button>
</div>

按照以往的经验，只要使用 ng-src 捆绑数据就可以了。但是audio无法正常绑定url数据。

（省略中间各种尝试，直接上解决办法）

1，对应得control中添加 $sce

2，使用$sce.trustAsResourceUrl(捆绑的url)处理，然后进行捆绑就ok啦

第二： JS部分

以下是示例代码，供参考

functionAppCtrl($scope, $sce){// ...
    $scope.setProject =function(id){
        $scope.currentProject = $scope.projects[id];
        $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    }
}

我是这样做的，也可以，你懂的。

//controller
var modalInstanceCtrl = function ($scope, $sce) {
     $scope.sce = $sce.trustAsResourceUrl;
     ....
}
//html
 <div class="block_area block_audio" ng-show="model.url">
     <audio controls="controls" popover-title="{{model.url}}" ng-click="open()" ng-src="{{sce(model.url)}}"></audio>
     <button class="close btn_delete" ng-click="remove()">&times;</button>
 </div>

本文转载自：http://www.cnblogs.com/rachelanlan/p/3598070.html