今天在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. drupal7的node的内容的存储位置

    标题是存在node表中的,但是实际内容存在表field_data_body中

  2. DateUtils时间工具类探究

    首先声明一下,这个DateUtils工具类不是自己写的,而是在commons-lang-2.Xjar包或是commons-lang3-3.X.jar包中,具体在哪个jar包中,看程序具体添加了哪个版本 ...

  3. string的数值转换

    to_string(val); //数值val的string表示 stoi (s, p, b); stol (s, p, b); stoul (s, p, b); stoll (s, p, b); s ...

  4. mvc Area相关技术

    ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规则去组织model实体层,views视图层和控制层的.如果是大规模的应用程序,经常会由不同功能的模块组成,而每个功能模块都由MVC中的三层所 ...

  5. LeetCode OJ 96. Unique Binary Search Trees

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  6. 剑指offer 旋转数组

    class Solution { public: int minNumberInRotateArray(vector<int> rotateArray) { //常规的遍历方法时间是O(N ...

  7. Hibernate4 占位符(?)

    Hibernate3使用?占位符: Session session = sessionFactory.getCurrentSession();  session.beginTransaction(); ...

  8. hadoop native

    http://blog.csdn.net/benben85/article/details/4161134 http://stackoverflow.com/questions/19943766/ha ...

  9. KVM 基本硬件容量扩容

    在工作当中如果虚拟机的容量不够使用 如何添加呢? CPU添加 cpu添加有两种方式: 1 创建虚拟机的时候可以添加 # virt-install --help | grep cpu --vcpus=V ...

  10. java.sql.ResultSet技术(从数据库查询出的结果集里取列值)

    里面有一个方法可以在查询的结果集里取出列值,同理,存储过程执行之后返回的结果集也是可以取到的. 如图: 然后再运用 java.util.Hashtable 技术.把取到的值放入(K,V)的V键值里,K ...