Angular setting $sce in ng-repeat

Question

I am trying to display videos in iframe, but nothing gets displayed even though I am getting the right embed link for it. I have tried testing it by just displaying the link and the correct link gets displayed, and when I am hardcoding the same link for the iframe, videos gets displayed, but nothing gets rendered in the iframe when I am having it like this:

<ion-item ng-repeat="article in articles" class="item-light">
    <img ng-show="article.external_media.length == 0 || article.external_media.url == ''"  src="http://coop.app/imagecache/cover/{{article.cover_image}}">
    <iframe ng-show="article.external_media.length > 0 && article.external_media.url != ''" src="{{article.external_media[0].url}}"></iframe>
</ion-item>

Update

Since I need to inject $sce dependency I wonder how to apply it to all the possible links in my controller. How would that function look?

This is my controller:

.controller('FrontPageController', function($scope, ArticleService, $state) {
  ArticleService.all().then(function(data){
    $scope.articles = data;
})

It's an `$sce` issue, you can't put as src an untrusted value so you should inject `$sce` and trust this particular as valid resource — maurycy, Jul 05 '16 at 15:30
Possible duplicate of [How to set an iframe src attribute from a variable in AngularJS](http://stackoverflow.com/questions/20045150/how-to-set-an-iframe-src-attribute-from-a-variable-in-angularjs) — maurycy, Jul 05 '16 at 15:31

score 2 · Accepted Answer · answered Jul 06 '16 at 14:26

2

Since I need to inject $sce dependency I wonder how to apply it to all the possible links in my controller. How would that function look?

I'd recommend a filter for this.

.filter( 'safeUrl', [
    '$sce'
    function( $sce ){
        return function(url){
             //not sure which one you need here
             return $sce.trustAsUrl(url)
        }
    }
])

in your html

<iframe src="{{article.external_media[0].url | safeUrl}}">

I advocate filters over controller methods only in I like to keep my controllers very lightweight. If something needs to be interpreted, I use a filter.

answered Jul 06 '16 at 14:26

jusopi

6,791
2
33
44

I have tried your suggestion but I get ionic.bundle.js:26794 Error: [$interpolate:interr] Can't interpolate: {{article.external_media[0].url | safeUrl }} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. – Ludwig Jul 06 '16 at 14:40
Try using `$sce.trustAsResourceUrl` instead? I haven't used $sce for iFrames so I don't know which is the proper method to use ergo my comment `//not sure which one you need here` – jusopi Jul 06 '16 at 14:49

Angular setting $sce in ng-repeat

1 Answers1

Linked