如果直接写路径到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 路径 z-index 必须有position的更多相关文章

  1. angularjs 中的iframe 标签 ng-src 路径

    如果直接写路径到iframe标签里的ng-src中会出现报错: 解决方法: 1.ng里面有个属性是专门用来解决跨域问题的 $sce. 用法: $scope.someUrl = $sce.trustAs ...

  2. HTML <iframe> 标签的 src 属性

    HTML <iframe> 标签的 src 属性 <iframe src="/index.html"> <p>Your browser does ...

  3. thymeleaf中img标签图片src路径问题

    转载自:解决java - Thymeleaf conditional img src 正确写法. <img class="layui-nav-img" th:src=&quo ...

  4. react项目中关于img标签的src属性的使用

    在一个html文件中,img的src属性赋值为相对路径或绝对路径的字符串即可访问到图片.如下: <img src="../images/photo.png"/> 但在j ...

  5. angularjs中动态为audio绑定src

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

  6. AngularJS 中<a> 超链接标签不起作用?

    开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...

  7. angularjs中动态为audio绑定src问题总结

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

  8. Thymleaf中th:each标签遍历list如何获取index

    简单介绍:传递给后台一个String类型的list,需要获取到list的每一个元素,然后进行筛选,得到正确的文本值,看代码就明白了 代码: //后台java代码//failList是一个String类 ...

  9. 怎样在一个HTML中嵌入另一个HTML页面(iframe标签用法)

    iframe 怎么 在一个网页中嵌入另一个网页呢,我们可以用html中的iframe标签搞定. iframe支持所有浏览器.下面来看语法: <iframe src="规定在 ifram ...

随机推荐

  1. HDOJ 1534 Schedule Problem 差分约束

    差分约数: 求满足不等式条件的尽量小的值---->求最长路---->a-b>=c----> b->a (c) Schedule Problem Time Limit: 2 ...

  2. js 判断是否包含

    1.判断一个数组中是否包含某元素 arr.indexOf(val) > -1 // true 包含 false 不包含 arr.includes(val) // ES7 true 包含 fals ...

  3. Flex 自定义打印控件编写

    打印历来是web应用一个比较棘手的问题,幸好flex web应用是运行在flash player上的,flash player可以访问打印机,所以flex 应用可以实现比较强大的打印功能.Flex 自 ...

  4. Roboware 下打包成so 文件并引用

      一.生成.so文件 在ros中编译.so文件,如同在vs中编译C++版的dll文件.具体步骤如下: 步骤1: 首先建立.h文件和一个.cpp文件(该.cpp文件就是此次封装的内容)   步骤2: ...

  5. Url Scheme实现APP间通信、分享

    代码地址如下:http://www.demodashi.com/demo/12748.html 简介: URL Scheme就是一个可以让app相互之间可以跳转的对外接口.通过给APP定义一个唯一的U ...

  6. Java 常见的异常错误分析大集合

      算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastException 数组负下标异常:Negative ...

  7. LBS 附近的人

    1 http://www.infoq.com/cn/articles/depth-study-of-Symfony2 2 http://lbsyun.baidu.com/

  8. Android下Fragment使用(全集)

    1 http://blog.csdn.net/niu_gao/article/details/7163263  思路清晰,讲解详细,代码偏少,推荐高手阅读 2 http://blog.csdn.net ...

  9. CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放 《CCKiller:Linux轻量级CC攻击防御工具,秒级检查、自动拉黑和释放》来自张戈博客

    张戈博客很久以前分享过一个CC攻击的防御脚本,写得不怎么样,不过被51CTO意外转载了.博客从此走上了经常被人拿来练手的不归之路. 当然,还是有不少朋友在生产环境使用,并且会留言询问相关问题.根据这些 ...

  10. iOS UIView添加阴影

    _bottomView.layer.masksToBounds = NO; _bottomView.backgroundColor = [UIColor whiteColor]; _bottomVie ...