AngularJS ng-src внутри iframe

Question

У меня проблема с использованием 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'); 

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

Answer 1

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

HTML:

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

где «yourURL» является URL в IFRAME и «trustAsResourceUrl» является фильтром и определяется как в каком-то модуле (например, . например, фильтры-модули), как:

JS:

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

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

Answer 2

Ok я нашел то, что проблема была .. Спасибо за этот фильтр теперь работает :)

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

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

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

Answer 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); 
    }; 
}]);