angularjs中动态为audio绑定src
今天在angularjs中用audio的时候碰到的这些问题,查阅http://www.cnblogs.com/rachelanlan/p/3598070.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()">×</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问题总结
先上代码 <div class="block_area block_audio" ng-show="model.url"> <audio co ...
- 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 由于实际的需要,有时需要往网页中 ...
随机推荐
- Windows下QT4.8.4编译环境的搭建(转载http://blog.csdn.net/bestgonghuibin/article/details/38933141)
开始使用QT了,所以第一步就是把环境搭起来,这里小记一下,以免以后忘记. 1. 下载安装文件 要使用QT功能,那么必须要下载QT的源码,还必须要一个是用QT的编译环境,可以是VS2010,也可以是专用 ...
- 《JavaScript高级程序设计》读书笔记 ---函数
函数函数对任何语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行.ECMAScript 中的函数使用function 关键字来声明,后跟一组参数以及函数体. ...
- HDU - 1045 Fire Net(二分匹配)
Description Suppose that we have a square city with straight streets. A map of a city is a square bo ...
- C相关的图书(链接不可用)
Visual C++视频技术方案宝典.pdf: http://www.t00y.com/file/17628500 Windows 图形编程.pdf: http://www.t00y.com/file ...
- QTP连接MYSQL数据库方法
1.首先安装mysql数据驱动,qtp在windows系统下操作连接mysql,所以下载mysql-connector-odbc- 5.1.8-win32.msi 下载地址:http://mysq ...
- SELECT TOP 1 * FROM是什么意思
SELECT TOP 1 * FROM的含义: 1.select为命令动词,含义为执行数据查询操作: 2.top 1子句含义为查询结果只显示首条记录: 3.*子句表示查询结果包括数据源中的所有字段: ...
- 图像相似度计算之哈希值方法OpenCV实现
http://blog.csdn.net/fengbingchun/article/details/42153261 图像相似度计算之哈希值方法OpenCV实现 2014-12-25 21:27 29 ...
- hdu_5776_sum(前缀和维护)
题目链接:hdu_5776_sum 题意: 给你一串数,问你是否有一个连续的子序列的和为m的倍数 题解: 维护一个前缀和%m的值,如果前缀和%m的值为0或者有两个前缀和%m的值相同,那么就有一个连续区 ...
- List列表 OrderBy
一个条件排序情况 list.OrderBy(item => tem.State); 多个条件的情况下 list.OrderBy(item => new {item.State, item. ...
- php:二进制处理
直接上代码 <?php #字符串 #php中字符串就是二进制,不用特别转化 #方法1:直接把字符串当成二进制 $c = "ccc"; var_dump($c, bin2hex ...