先上代码

 <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()">&times;</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()">&times;</button>
</div>

谢谢。

angularjs中动态为audio绑定src问题总结的更多相关文章

  1. angularjs中动态为audio绑定src

    今天在angularjs中用audio的时候碰到的这些问题,查阅http://www.cnblogs.com/rachelanlan/p/3598070.html获得解决,感谢! <div cl ...

  2. angularjs中的单选框绑定数据注意事项

    这里说的是angularjs 1.x 在实现单选框时,我们完全可以用html自带的<input type="radio"/>,但是配合angularjs 中的双向绑定, ...

  3. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  4. jQuery1.9及其以上版本中动态元素on绑定事件无效解决方案

    jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...

  5. 如何动态改变audio的播放的src

    如何动态改变audio的播放的src 一.总结 一句话总结:js方式在请求外部网站的时候行,php方式在请求内外部资源都行.因为php走在js前面,所以问题可以从php方面想办法. 1.如何使用js控 ...

  6. 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定

    最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...

  7. Angularjs 中使用指令绑定点击事件

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...

  8. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  9. HTML中动态生成内容的事件绑定问题【转载】

    转自 http://www.hitoy.org/event-binding-problem-of-dynamically-generated-content.html 由于实际的需要,有时需要往网页中 ...

随机推荐

  1. sudo: /etc/sudoers is world writable|给用户添加权限报错

    给用户添加权限时候出现:sudo: /etc/sudoers is world writable| sudo: /etc/sudoers is world writable解决方式: pkexec c ...

  2. vue中export和export default的使用

    1 export的使用 比喻index.js要使用test.js中的数据 首先在test.js文件中进行导出操作 在index.js文件进行导入操作 第一种方法: 此时的输出结果是: 注意: expo ...

  3. Android Butterknife使用方法总结

    原文链接:http://blog.csdn.net/donkor_/article/details/77879630 前言: ButterKnife是一个专注于Android系统的View注入框架,以 ...

  4. java关键字之instanceof

    首先来看段测试代码 public class TestInstanceof{ public static void main(String[] args){ int a = 1; if(a insta ...

  5. mysql的建表约束

    主键约束(primary key) 主键约束能够唯一确定一张表中的记录,也就是可以通过某个字段添加约束,就可以是的该字段不重复,且不为空 create table user (id int prima ...

  6. 操作RDS数据库

  7. Luogu P2717 寒假作业(平衡树)

    P2717 寒假作业 题意 题目背景 \(zzs\)和\(zzy\)正在被寒假作业折磨,然而他们有答案可以抄啊. 题目描述 他们共有\(n\)项寒假作业.\(zzy\)给每项寒假作业都定义了一个疲劳值 ...

  8. Mysql 数据库crash恢复

    之前搭建的ghost博客比较坑,修改comment之后重启数据丢了,对node不熟悉,所以就切换回到wordpress了. 回滚快照之后发现数据库crash了,提示如下信息 2016-06-15 23 ...

  9. day2-元组、字典、文件操作

    学习内容: 1. 元组操作 2. 字典操作 3. 文件操作 4. 深浅copy 1. 元组操作: 元组和列表非常相似,只不过元组不能在原处修改(它是不可变的),并且通常写成圆括号中的一系列项. # 元 ...

  10. vue爬坑之input组件

    本篇写给第一次用VUE写输入框组件的朋友们 正常情况我们vue2.0是怎么样取到input框的值的呢? 很简单只需要给input框设置v-model="val" 我们就能从data ...