iframe中AngularJS NG-SRC [英] AngularJS ng-src inside of iframe

问题描述

我在使用NG-SRC iframe的内部问题。我需要做的是：

I have problem using ng-src inside of iframe. I need to do this:

<div class="tab-content">
        <ul class="nav nav-tabs" ng-repeat="document in issues.Document">
            <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
                <iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%"></iframe>                    
            </div>
        </ul>
    </div>

结果：

<iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%" src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}"></iframe>

我知道，问题是这是从保护XSS SCE $，而以链接所需的白名单中添加。所以当我这样做其工作正常。

i know that problem is $sce which is protecting from XSS, and that to link needed to be added in whitelist.. So it is working when I do this.

<ul class="nav nav-tabs" ng-repeat="document in issues.Document">
    <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
         <iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>                    
     </div>
</ul>

和我定义控制器内

$rootScope.someUrl = $sce.trustAsResourceUrl('http://192.168.223.110/cat/files/incoming/12345_3232ASD_pero.pdf');

但我不能做这样的，因为我与吴重复循环，所以将其链接将是多变的。它需要的是从数据库读取！

But i cant do like that because I'm looping with ng-repeat, so link it is going to be changable. It need's to be readable from database!

推荐答案

您可以使用过滤器来代替：

You can use a filter instead:

HTML

<iframe src="{{yourURL | trustAsResourceUrl}}"></iframe>

其中yourURL是iframe和trustAsResourceUrl的网址是过滤器，并定义为在某些模块（例如像过滤器模块）为：

where 'yourURL' is the URL of the iframe and 'trustAsResourceUrl' is the filter and is defined as in some module(like eg. filters-module) as:

JS：

angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])

你可以在所有的内部框架和应用程序中的其他嵌入式项目使用此过滤器。
该过滤器将带你需要加入滤光片只是相信所有网址。

And you can use this filter in all the iframes and other embedded items in your application. This filter will take care of all the urls that you need to trust just by adding the filter.

这篇关于iframe中AngularJS NG-SRC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！