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 由于实际的需要,有时需要往网页中 ...
随机推荐
- pickView不需要明确设置高度
pickView不用设置高度,若设置了,在iOS8.4.1上不会被填充,会造成没有把pickView高度设置成你想要的,但是布局其他地方的时候却会从你设置的地方开始,就会造成布局不紧挨着或者遮盖着的效 ...
- Python 常见的内置模块
datetime datetime是python处理日期和时间的标准库 获取当前日期和时间 我们先看看如何获取当前的日期和时间: >>> from datetime import d ...
- linux yum安装mongodb
1.yum -y install mongodb-server mongodb 2.service mongod start #启动mongodb 服务 3. ...
- Oracle 10gR2 Dataguard搭建(非duplicate方式)
Oracle 10gR2 Dataguard搭建(非duplicate方式) 我的实验环境: 源生产库(主库): IP地址:192.168.1.30 Oracle 10.2.0.5 单实例 新DG库( ...
- 自定义控件之--组合控件(titlebar)
自定义控件相关知识从郭霖等大神身上学习,这里只不过加上自己的理解和实践,绝非抄袭. 组合控件是自定义控件中最简单的方式,但是是入门自定义控件和进阶的过程: 那么常见的组合控件有那些? 比如titl ...
- android基础知识点复习之短信发送
界面布局: activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/an ...
- C#项目转php工作记录
1.Visual Studio Ultimate 2012 静态激活密钥 RBCXF-CVBGR-382MK-DFHJ4-C69G8 http://blog.csdn.net/jpzy520/arti ...
- c语言_代码段_快说你是猪
/* 项目:快说你是猪 作者:landv 时间:2014年3月12日 编译环境:VS2013 */ #pragma warning(disable:4996) //全部关掉 #pragma warni ...
- XBOX360 硬盘玩游戏
首先PC端需要到flashFXP这个软件,因为级别不够上传不了就发个下载网站各位自己下一下吧.http://www.oyksoft.com/soft/14875.html#oyksoftdown 好了 ...
- [转载]Linux 环境下编译 0.11版本内核 kernel
最近在看<.如果Clobber/Modify 为空,则其前面的冒号(:)必须省略. 2.如果Output,Input,Clobber/Modify都为空,Output,Input之前的冒号(:) ...