先上代码

 <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. spring整合shiro框架

    上一篇文章已经对shiro框架做了一定的介绍,这篇文章讲述使用spring整合shiro框架,实现用户认证已经权限控制 1.搭建环境 这里不在赘述spring环境的搭建,可以简单的搭建一个ssm框架, ...

  2. php 扫描url死链接 \033[31m ANSI Linux终端输出带颜色

    * 从Packagist上搜索需要的包 https://packagist.org/ * 通过composer下载依赖包 composer require guzzlehttp/guzzlecompo ...

  3. VS2010-MFC(常用控件:列表视图控件List Control 下)

    转自:http://www.jizhuomi.com/software/197.html 上一节是关于列表视图控件List Control的上半部分,简单介绍了列表视图控件,其通知消息的处理和有关结构 ...

  4. Print Article /// 斜率优化DP oj26302

    题目大意: 经典题 数学分析 G(a,b)<sum[i]时 a优于b G(a,b)<G(b,c)<sum[i]时 b必不为最优 #include <bits/stdc++.h& ...

  5. 统计学习笔记之k近邻法

    1.kNN算法的思想:给定一个训练数据集,对新的输入实例,在训练集中找到与该实例最近邻的k个实例,这k个实例的多数属于某类,就把输入实例分为这个类. 2.算法 (1)根据给定的距离度量,在训练集T中找 ...

  6. C++函数或者命名空间前面加::

    命名空间和函数前面加上:: 经常看到命名空间前就只有:: 比如  ::test;这种代表是全局的test 比如  ::CreateDirectory(..),代表使用系统API也就是全局的 避免使用到 ...

  7. JavaScript中对象的3种定义方式

    对象是有特性(属性)和功能(方法)的集合体. 定义对象有以下3种方式: 1.使用系统的new Object()方式定义对象 2.使用对象字面量定义对象( 即使用{}语法糖结构定义对象 ) 3.使用自定 ...

  8. python Selenium chromedriver 自动化超时报错:你需要使用多标签保护罩护体

    在使用selenium + chrome 作自动化测试的时候,有可能会出现网页连接超时的情况 如果出现网页连接超时,将会导致 webdriver 也跟着无法响应,不能继续进行任何操作 即时是去打开新的 ...

  9. js实现把多个数据分成3个一组

    主要代码: var stuCount = res.data; if (stuCount.length>0){ var objList = new Object(); var arr = new ...

  10. [JZOJ5355] 【NOIP2017提高A组模拟9.9】保命

    题目 描述 题目已经足够清晰了,所以不再赘述题目大意. 思考历程 一眼看下去,好像是一道大水题! 然而,再看几眼,感觉又不是一道水题! 然后想了半天,感觉它特别难转移! 最终打了一个暴力,然后发现样例 ...