今天在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()">&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问题总结

    先上代码 <div class="block_area block_audio" ng-show="model.url"> <audio co ...

  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. 多线程synchronized用例解析

    当用synchronized来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码.即使在执行过程中,CPU切换到别的线程了,因为有锁的缘故,其他线程也不会进来执行代码,而 ...

  2. 在鼠标右键添加“使用WPS打开”

    假设WPS安装在 “D:\Program Files\Kingsoft\WPS Office” 目录下,导入以下注册表内容: Windows Registry Editor Version 5.00 ...

  3. 学习笔记——解释器模式Interpreter

    解释器模式,其实就是编译原理中的语法解释器,如果用在项目中,可以用于实现动态脚本的解析,也就是说项目可以支持用户脚本扩展. 但实际上,这种运行时解释,效率很慢,如果不是很需要的话,不建议使用. 一种简 ...

  4. OPENWRT make menuconfig错误之一

    1.make menuconfig rm: cannot remove `tmp/.host.mk': Permission denied 退到trunk上级目录sudo chown -R 777 t ...

  5. 16.按要求编写Java应用程序。 编写一个名为Test的主类,类中只有一个主方法; 在主方法中定义一个大小为50的一维整型数组,数组名为x,数组中存放着{1, 3,5,…,99}输出这个数组中的所有元素,每输出十个换一行;在主方法中定义一 个大小为10*10的二维字符型数组,数组名为y,正反对角线上存的是‘*’,其余 位置存的是‘#’;输出这个数组中的所有元素。

    //分类 package com.bao; public class Shuchu { int[]yi=new int[50]; String[][]er=new String[10][10]; vo ...

  6. Canvas 数学、物理、动画学习笔记一

    Canvas 第五章 数学.物理和运动学习笔记让人映像深刻的运动,需要我们不只是简单的知道如何移动对象,还需要知道怎么按用户期望看到的方式去移动它们.这些需要基于数学知识的基本算法和物理学作用.基于点 ...

  7. oracle常用命令【转载】

    oracle常用命令 一.Oracle数据库实例.用户.目录及session会话查看: 1.ORACLE SID查看设置 查看SID.用户名 $ env|grep SID .select * from ...

  8. perl模块安装

    转自: http://www.cnblogs.com/itech/archive/2009/08/10/1542832.html http://www.mike.org.cn/blog/index.p ...

  9. hibernate ——关联关系

    1.一对一单向外键关联 <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernate-configuration PUBLIC ...

  10. zf-删除重复数据只保留一条(转)

    http://blog.csdn.net/anya/article/details/6407280