angularjs 中的iframe 标签 ng-src 路径
如果直接写路径到iframe标签里的ng-src中会出现报错;
解决方法:
1、ng里面有个属性是专门用来解决跨域问题的 $sce。
用法:
$scope.someUrl = $sce.trustAsResourceUrl('路径');
例:
<ul class="nav nav-tabs" ng-repeat="item in [1,2,3,4]">
<iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>
</ul>
2、可以巧用上面方法写一个过滤器。
angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}])
例:
<ul class="nav nav-tabs" ng-repeat="item in [1,2,3,4]">
<iframe ng-src="{{someUrl |trustAsResourceUrl }}" height="100%" width="100%"></iframe>
</ul>
angularjs 中的iframe 标签 ng-src 路径的更多相关文章
- angularjs 中的iframe 标签 ng-src 路径 z-index 必须有position
如果直接写路径到iframe标签里的ng-src中会出现报错: 解决方法: 1.ng里面有个属性是专门用来解决跨域问题的 $sce. 用法: $scope.someUrl = $sce.trustAs ...
- HTML <iframe> 标签的 src 属性
HTML <iframe> 标签的 src 属性 <iframe src="/index.html"> <p>Your browser does ...
- thymeleaf中img标签图片src路径问题
转载自:解决java - Thymeleaf conditional img src 正确写法. <img class="layui-nav-img" th:src=&quo ...
- react项目中关于img标签的src属性的使用
在一个html文件中,img的src属性赋值为相对路径或绝对路径的字符串即可访问到图片.如下: <img src="../images/photo.png"/> 但在j ...
- angularjs中动态为audio绑定src
今天在angularjs中用audio的时候碰到的这些问题,查阅http://www.cnblogs.com/rachelanlan/p/3598070.html获得解决,感谢! <div cl ...
- AngularJS 中<a> 超链接标签不起作用?
开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...
- angularjs中动态为audio绑定src问题总结
先上代码 <div class="block_area block_audio" ng-show="model.url"> <audio co ...
- 怎样在一个HTML中嵌入另一个HTML页面(iframe标签用法)
iframe 怎么 在一个网页中嵌入另一个网页呢,我们可以用html中的iframe标签搞定. iframe支持所有浏览器.下面来看语法: <iframe src="规定在 ifram ...
- iframe标签flash遮盖页面元素问题——wmode参数
最近做项目过程中,遇到各种小问题,所以打算通过博客园来记录各问题的解决办法. 这篇的问题背景是这样子的:项目是用的AngularJS框架,在某个页面上用了wangEditor富文本编辑器插件(gith ...
随机推荐
- Js模块模式
模块模式 索引 引子 什么是模块模式 命名空间模式 声明依赖 私有和特权成员 即时函数 揭示模块模式 结语 引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中 ...
- Markdown 代码测试
Mou Overview Mou, the missing Markdown editor for web developers. Syntax Strong and Emphasize strong ...
- Linq无聊练习系列7----Insert,delete,update,attach操作练习
/*********************Insert,delete,update,attach操作练习**********************************/ ...
- IOS学习之路十四(用TableView做的新闻客户端展示页面)
最近做的也个项目,要做一个IOS的新闻展示view(有图有文字,不用UIwebview,因为数据是用webservice解析的到的json数据),自己一直没有头绪,可后来听一个学长说可以用listvi ...
- OJ题目JAVA与C运行效率对比
[JAVA]深深跪了,OJ题目JAVA与C运行效率对比(附带清华北大OJ内存计算的对比) 看了园友的评论之后,我也好奇清橙OJ是怎么计算内存占用的.重新测试的情况附在原文后边. ----------- ...
- Rustlang语言逐行处理文件的基本方法
文件操作 需求: 将文件中的内容按行读取出来,然后对改行的数据进行处理,最后将处理后的行数据存放到新的文件中. 使用RUST来处理的方法如下. 首先引入需要的标准库: use std::io::pre ...
- 使用Emacs:生存篇
使用Emacs:生存篇 vim和Emacs都是很强大的编辑器.所以,入门有一定难度.这里不谈vim,谈Emacs下的生存--第一次使用Emacs时的使用. 1.emacs的安装: 在Fedora下: ...
- ASP.NET MVC基础学习
ASP.NET MVC基础学习 传统的MVC概念 模型:组类,描述了要处理的数据以及修改和操作数据的业务规则 视图:定义应用程序用户界面的显示方式 控制器:一组类,用来处理来自用户,整个应用程序流以及 ...
- 什么是LeapMotion
LeapMotion预览——什么是LeapMotion LeapMotion预览 这个就是LeapMotion: 原文转自: LeapMotion预览 LeapMotion 官网:http://l ...
- 在gem5的full system下运行 x86编译的测试程序 running gem5 on ubuntu in full system mode in x86
背景 上篇博客写了如何在gem5的full system模式运行alpha的指令编译的程序,这篇博客讲述如何在gem5的full system模式运行x86指令集编译的程序,这两种方式非常类似. 首先 ...