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 由于实际的需要,有时需要往网页中 ...
随机推荐
- 数组那些事(slice,splice,forEach,map,filter等等)
周五,再过会要下班了,刚才把<javascript高级程序设计>数组这块又看了下,加深下记忆.今天来继续练练笔,嘿嘿!(写下自己印象不深的东西) 一.数组的定义(数组定义分为两种) 方法一 ...
- P1934 封印
P1934 封印 题目描述 很久以前,魔界大旱,水井全部干涸,温度也越来越高.为了拯救居民,夜叉族国王龙溟希望能打破神魔之井,进入人界“窃取”水灵珠,以修复大地水脉.可是六界之间皆有封印,神魔之井的封 ...
- 框架:Flutter(移动应用程序开发框架)
ylbtech-框架:Flutter(移动应用程序开发框架) Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作. ...
- python笔记三
# 数据读写不一定是文件,也可以在内存中读写 # StringIO就是在内存中读写str from io import StringIO f = StringIO() # 要把str写入StringI ...
- 几个 GetHashCode 函数
几个 GetHashCode 函数: DBTables.pas Delphi/Pascal code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
- SpringBoot--Banner的定制和关闭
SpringBoot项目启动的时候控制台会打印如下信息: 上面红色框框内的“SPRING BOOT”被称为Banner,意为横幅,默认会开启并在控制台打印,其实我们可以修改它的内容和样式,即定制:并选 ...
- eclipse 克隆 https 地址的 Git 仓库报错:cannot open git-upload-pack
解决方法:Window >Preferences >Team>Git>User settings点击Add Entry设置key:http.sslVerify value:fa ...
- react+redux+react-redux练习项目
一,项目目录 二.1.新建pages包,在pages中新建TodoList.js: 2.新建store包,在store包中新建store.js,reducer.js,actionCreater.js, ...
- odoo 下 get_object_reference 函数
get_object_reference是 ir.model.data 模块中下的一个函数 该函数通过调用ir.model.data 模块中另外一个函数 xmlid_lookup 返回结果 def g ...
- 「题解」:[组合数学]:Perm 排列计数
题干: Description称一个1,2,…,N的排列P1,P2…,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,…N的排列中有多少是Magic的,答 ...