如果直接写路径到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 路径的更多相关文章

  1. angularjs 中的iframe 标签 ng-src 路径 z-index 必须有position

    如果直接写路径到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. 怎样在一个HTML中嵌入另一个HTML页面(iframe标签用法)

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

  9. iframe标签flash遮盖页面元素问题——wmode参数

    最近做项目过程中,遇到各种小问题,所以打算通过博客园来记录各问题的解决办法. 这篇的问题背景是这样子的:项目是用的AngularJS框架,在某个页面上用了wangEditor富文本编辑器插件(gith ...

随机推荐

  1. MVC框架的插件与拦截器基础

    自制MVC框架的插件与拦截器基础 上篇谈到我自己写的MVC框架,接下来讲讲插件及拦截器! 在处理一些通用的逻辑最好把它封装一个插件或者拦截器,以便日后可以直接拿过来直接使用.在我的框架中可以通过继承以 ...

  2. EF Code First Migrations, 支持MySQL

    1.Enable-Migrations 2. Add-Migration TagName 3. Update-Database 注意,每次更改cs后,注意Build,再运行命令. MySql参考: h ...

  3. 笔试总结篇(一) : 广州X公司笔试

    一.单选题: Ps : 当时由于去广州路上颠簸很困,导致刚做几分钟题目就睡了一觉.起来发现20分钟过去了.擦擦! 1. 假设磁盘文件foobar.txt 由 6个ASCII 码字符“foobar” 组 ...

  4. AngularJS的初始化

    AngularJS的初始化 本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过 ...

  5. discuz 门户功能增加自定义keywords字段

    discuz的门户的“发布文章”功能中,没有自动添加keywords字段,结果在文章页面中的meta的keywords中只显示标题,这样对于seo及其不利,今天整理了添加keywords字段方法. 一 ...

  6. C/C++基础知识总结——C++简单程序设计

    1. sizeof 1.1 sizeof(类型名) 1.2 sizeof 表达式 1.3 返回所占字节大小 2. I/O流的输出格式 2.1 常用I/O流库操纵符 dec         十进制 he ...

  7. 求字符串长度 strlen(数组指针两种方式)

    问题: 求字符串中所含有字符的个数(包括空格),即求字符串长度: #include <stdio.h> #include <assert.h> int _strlen(cons ...

  8. addEventListener和attachEvent以及element.onclick的区别

    addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...

  9. CKEditor4.x部署和配置

    CKEditor4.x && JSP 官网下载CKEditor,可选Basic, Standard, Full 解压放置其WebRoot下 JSP中引入以下文件: <script ...

  10. python-igraph on windows10 64bit

    igraph安装记录: 在http://www.lfd.uci.edu/~gohlke/pythonlibs/找到对应版本的python-igraph 这里是anaconda的python2.7.11 ...