angularjs 中动态为 audio 绑定 src

Admin
Admin
Admin
52
文章
6
评论
2018年4月10日10:59:44 评论 9,589 2352字阅读7分50秒

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

一、常规写法

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

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

二、实际操作

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

  1. functionAppCtrl($scope, $sce){
  2.     $scope.setProject =function(id){
  3.         $scope.currentProject = $scope.projects[id];
  4.         $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
  5.     }
  6. }

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

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

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

三、$sce 的认识

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

  1. $sce.trustAs(type,name);
  2. $sce.trustAsHtml(value);
  3. $sce.trustAsUrl(value);
  4. $sce.trustAsResourceUrl(value);
  5. $sce.trustAsJs(value);

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  6. </head>
  7. <body ng-app="mySceApp">
  8.     <div ng-controller="AppController">
  9.         <!--这里不能用ng-bind,因为是渲染一段html文本,而不是显示简单的数据-->
  10.         <div ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></div>
  11.     </div>
  12.     <script type="text/javascript">
  13.         angular.module('mySceApp',[])
  14.         .controller('AppController', ['$scope', '$sce',
  15.           function($scope, $sce) {
  16.             $scope.explicitlyTrustedHtml = $sce.trustAsHtml(
  17.                 '<span onmouseover="this.textContent=&quot;Explicitly trusted HTML bypasses ' +
  18.                 'sanitization.&quot;">Hover over this text.</span>');
  19.           }]);
  20.     </script>
  21. </body>
  22. </html>

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

继续阅读
Admin
  • 本文由 发表于 2018年4月10日10:59:44
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: