angularjs 中动态为 audio 绑定 src

Admin

52
文章

6
评论

2018年4月10日10:59:44 评论 9,896 2352字阅读7分50秒

在这次项目的版本迭代时候遇到一个问题，就是怎么在 angular 中动态的为 audio 绑定 src ，当时我以为和 img 的 src 一样呢，直接就是 ng-src = "{{}}" 就能动态绑定，但是实际的结果是行不通的，然后在网上找到了一些有关于 audio 绑定 src 的文章，通过文章的步骤试了一下，的确是可以行得通，这边呢我就根据自己踩的坑再来总结一遍这个问题。

一、常规写法

<div>
<audio controls="controls" ng-src="{{model.url}}" type="audio/mpeg"></audio>
</div>

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

二、实际操作

通过网上的一些教程步骤，需要在模块中引用 $sce 服务，然后在调用 $sce.trustAsResourceUrl() 的方法。
以下是网上的示例代码：

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

我这边根据我们的业务需求来整理了一下代码：

<div>
<audio controls="controls" ng-src="{{sce(model.url)}}" type="audio/mpeg"></audio>
</div>
angular.module("appModule")
.controller('mapplCtrl', ['$scope', '$sce', function($scope, $sce) {
$scope.sce = $sce.trustAsResourceUrl;
}]);

这样的话就可以通过 ng-src 来动态绑定 url 的数据了！

三、$sce 的认识

“sce”指的是 “Strict Contextual Escaping” ，我的理解是 严格的上下文隔离 翻译的可能不准确，但是通过字面理解，应该是 angularjs 严格的控制上下文访问。
由于 angular 默认是开启 SCE 的，因此也就是说默认会决绝一些不安全的行为，比如你使用了某个第三方的脚本或者库、加载了一段 html 等等。这样做确实是安全了，避免一些跨站XSS，但是有时候我们自己想要加载特定的文件，这时候怎么办呢？此时可以通过$sce服务把一些地址变成安全的、授权的链接...简单地说，就像告诉门卫，这个陌生人其实是我的好朋友，很值得信赖，不必拦截它！
常用的方法有：

$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

其中后面的几个都是基于第一个 api 使用的，比如 trsutAsUrl 其实调用的是 trsutAs($sce.URL,"xxxx");
其中 type 可选的值为：

$sce.HTML
$sce.CSS
$sce.URL // a标签中的 href ， img 标签中的 src
$sce.RESOURCE_URL // ng-include、src或者 ngSrc，比如 iframe 或者 Object
$sce.JS

来自官网的例子：ng-bind-html

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
<div ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></div>
</div>
<script type="text/javascript">
angular.module('mySceApp',[])
.controller('AppController', ['$scope', '$sce',
function($scope, $sce) {
$scope.explicitlyTrustedHtml = $sce.trustAsHtml(
'<span onmouseover="this.textContent="Explicitly trusted HTML bypasses ' +
'sanitization."">Hover over this text.</span>');
}]);
</script>
</body>
</html>

博主只是一名前端的小白，只是把自己用到的知识分享一下，要是有什么不对的地方，欢迎大家提出~~

继续阅读

一、常规写法

二、实际操作

三、$sce 的认识

发表评论 取消回复

发表评论取消回复