AngularJS ng-src внутри iframe

У меня проблема с использованием ng-src внутри iframe. Мне нужно сделать это:

<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>

Я знаю, что проблема в $sce, которая является защитой от XSS и что ссылка должна быть добавлена в белый список... Поэтому он работает, когда я это делаю.

<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');

Но я не могу этого сделать, потому что я зацикливаюсь с ng-repeat, поэтому ссылка генерируется динамически. Он должен быть доступен для чтения из базы данных!

Ответ 1

Вместо этого вы можете использовать фильтр:

HTML:

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

где "yourURL" - это URL-адрес iframe, а "trustAsResourceUrl" - это фильтр и определяется как в некотором модуле (например, filter-module) как:

JS:

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

И вы можете использовать этот фильтр во всех фреймах и других встроенных элементах вашего приложения. Этот фильтр позаботится обо всех URL-адресах, которые вам нужно доверять, просто добавив фильтр.

Ответ 2

Хорошо, я понял, в чем проблема. Спасибо за тот фильтр, который он работает сейчас.

Все, что мне нужно было сделать, это создать ссылку ng-src:

<iframe ng-src="{{apiUrl+document.directory + '/' + document.name + '.'+ document.type   | trustAsResourceUrl}}" height="100%" width="100%"></iframe>

Может быть, это помогает кому-то!:)

Ответ 3

Как сказал Kop4lyf вам нужно добавить фильтр в js

//Create a filter for trust url
    app.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

и вывести ih html как

ng-src="{{x.title.rendered | trustAsResourceUrl}}"

Некоторые другие фильтры:

//Create a filter for trust html
    app.filter('trustAsHtml', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
}]);