如果直接写路径到iframe标签里的ng-src中会出现报错;

  解决方法:

1、ng里面有个属性是专门用来解决跨域问题的 $sce。

  用法:

  1. $scope.someUrl = $sce.trustAsResourceUrl('路径');
    例:
  1. <ul class="nav nav-tabs" ng-repeat="item in [1,2,3,4]">
  2. <iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>
  3. </ul>
  4. 2、可以巧用上面方法写一个过滤器。
  1. angular.module('filters-module', [])
  2. .filter('trustAsResourceUrl', ['$sce', function($sce) {
  3. return function(val) {
  4. return $sce.trustAsResourceUrl(val);
  5. };
  6. }])
    例:
  1. <ul class="nav nav-tabs" ng-repeat="item in [1,2,3,4]">
  2. <iframe ng-src="{{someUrl |trustAsResourceUrl }}" height="100%" width="100%"></iframe>
  3. </ul>
  1.  
  1.  

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. gof设计模式回顾

    gof23根据讲师学习笔记回顾: 1.gof:Gang of Four;叫grasp更具有针对性,解决具体的问题; ---------------------总共分为三大类: ---------创建型 ...

  2. GIT+云盘作 做 文档管理工具

    GIT+云盘作 做 文档管理工具 在工作中, 会遇到公司的文档 和 自己家里的 文档进行同步的问题, 通常我们使用U盘作为传输节制, 但是不是非常好,文档的改动都不能发现, 导致回家同步的时候, 出各 ...

  3. API变了,客户端怎么办?

    使用ASP.NET Web Api构建基于REST风格的服务实战系列教程[九]——API变了,客户端怎么办? 系列导航地址http://www.cnblogs.com/fzrain/p/3490137 ...

  4. 变易算法 - STL算法

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/mutating-algorithms.h ...

  5. Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定

    使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定   原文地址:http://www.dotnetjalps.com/2013/05/Simple-da ...

  6. .net通用底层搭建

    .net通用底层搭建 之前写过几篇,有朋友说看不懂,有朋友说写的有点乱,自己看了下,的确是需要很认真的看才能看懂整套思路. 于是写下了这篇. 1.这个底层,使用的是ado.net,微软企业库 2.实体 ...

  7. Xcode开发和调试总结

    Xcode是iOS开发主要的工具.IDE.关于Xcode的细枝末节,可以参考苹果的官方文档或者众多的说明.此文档主要涉及常用开发和调试注意事项,参考版本为Xcode 5.1.1. 目标设置: 在此,我 ...

  8. 清除在Windows下访问共享文件夹时的登录信息

    清除在Windows下访问共享文件夹时的登录信息 在实际工作中,经常需要访问局域网内其他机子上的共享文件夹,例如\\192.168.1.100\d$ , 首次访问时,需要输入用户名和密码才可以进入,即 ...

  9. mac下安装eclipse以及python

    因为前几天刚重装了我的mac osx 系统,从昨天开始我就在安装各种软件,当我安装好破解版的myeclipse后,在我安装pydev插件的时候,虽然现实成功但是在preference中死活找不到pyd ...

  10. Emacs助力PowerShell

    Emacs助力PowerShell 阅读目录 1 下载安装Emacs windows版本 2 下载el文件和配置Emacs加载PowerShell 3 体验用Emacs来执行和编辑PowerShell ...