angularjs中动态为audio绑定src问题总结
先上代码
<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()">×</button>
</div>
按照以往的经验,只要使用 ng-src 捆绑数据就可以了。 但是audio无法正常绑定url数据。
(省略中间各种尝试,直接上解决办法)
1,对应得control中添加 $sce
2,使用$sce.trustAsResourceUrl(捆绑的url)处理,然后进行捆绑就ok啦
以下是示例代码,供参考
functionAppCtrl($scope, $sce){// ...
$scope.setProject =function(id){
$scope.currentProject = $scope.projects[id];
$scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);}}
我是这样做的,也可以,如下:
//control
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()">×</button>
</div>
谢谢。
angularjs中动态为audio绑定src问题总结的更多相关文章
- angularjs中动态为audio绑定src
今天在angularjs中用audio的时候碰到的这些问题,查阅http://www.cnblogs.com/rachelanlan/p/3598070.html获得解决,感谢! <div cl ...
- angularjs中的单选框绑定数据注意事项
这里说的是angularjs 1.x 在实现单选框时,我们完全可以用html自带的<input type="radio"/>,但是配合angularjs 中的双向绑定, ...
- 深入学习AngularJS中数据的双向绑定机制
来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...
- jQuery1.9及其以上版本中动态元素on绑定事件无效解决方案
jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...
- 如何动态改变audio的播放的src
如何动态改变audio的播放的src 一.总结 一句话总结:js方式在请求外部网站的时候行,php方式在请求内外部资源都行.因为php走在js前面,所以问题可以从php方面想办法. 1.如何使用js控 ...
- 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定
最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...
- Angularjs 中使用指令绑定点击事件
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- HTML中动态生成内容的事件绑定问题【转载】
转自 http://www.hitoy.org/event-binding-problem-of-dynamically-generated-content.html 由于实际的需要,有时需要往网页中 ...
随机推荐
- DNS的解析过程
1.什么是DNS 在互联网上,唯一标识一台计算机的是IP地址,但是IP地址不方便记忆,通过一个域名对应一个IP地址,来达到找到IP地址的目的,那么DNS就是将域名转换成IP地址的过程. 2.DNS查询 ...
- Kafka和RabbitMQ 对比
1) Kafka成为业界大数据松耦合架构,异步,队列 特点:吞吐量高50m/s. Kafka和RabbitMQ都是MQ机制,它差异 Kafka作为大数据产品,可以作为数据源,也可以作为结果数据中转 ...
- win7下mysql5.5与mysql5.6同时安装
5.5己正常的情况下,用官方下载的安装包总是不成功,用的官方解压版5.6.44 1.复制my-default.ini到my.ini,只需要改端口就行了,设置base-dir/data-dir反而无法启 ...
- Docker系列(二):Docker基础命令
docker的部署安装(Linux kernel至少3.8以上): yum install docker docker1.8安装:(下面 是两个命令) # cat >/etc/yum.repos ...
- 如何在 JavaScript 中使用 C 程序
JavaScript 是个灵活的脚本语言,能方便的处理业务逻辑.当需要传输通信时,我们大多选择 JSON 或 XML 格式. 但在数据长度非常苛刻的情况下,文本协议的效率就非常低了,这时不得不使用二进 ...
- POJ 3348 /// 凸包+多边形面积
题目大意: 给定的n个点 能圈出的最大范围中 若每50平方米放一头牛 一共能放多少头 求凸包 答案就是 凸包的面积/50 向下取整 /// 求多边形面积// 凹多边形同样适用 因为点积求出的是有向面积 ...
- RPM包安装MySQL 5.7.18
系统: CentOS 7 RPM包: mysql-community-client-5.7.18-1.el7.x86_64.rpm mysql-community-server-5.7.18-1.el ...
- Python-包与常用模块(2)
目录 包 导入包内包 相对导入和绝对导入 注意事项 time模块 datetime模块 random模块 argparse 模块 configparser模块 hashlib模块和hmac模块 typ ...
- 转-Pycharm中运行Python代码的几种方式
转自:Pycharm中运行Python代码的几种方式 在pycharm中的Python代码运行会出现各种奇葩的问题,比如,密码输入时不显示或没有提示,给我们带来一些麻烦,下面介绍几种代码运行的几种方式 ...
- Android基础控件Button的使用
1.相关属性 Android的按钮有Button和ImageButton(图像按钮),Button extends TextView, ImageButton extends ImageView! a ...