Using $sce in ng-repeat within Angular configuration parameters

Question

Using $sce in ng-repeat within Angular configuration parameters

I have been trying to incorporate videos using iframes, but no content is being displayed even with the correct embed link. Strangely, when I manually input the link into the iframe tag, the videos show up as expected. Here is the code snippet where I am facing the issue:

<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

Considering the need to include $sce dependency, I am unsure of how to implement it for all potential links within my controller. What would be the correct approach for this function?

Below is my controller setup:

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

javascript angularjs iframe

Answer 1

Answer №1

Is there a way to use the $sce dependency to handle all links in my controller? What would be the best approach to achieve this?

One solution could be creating a filter for this purpose.

.filter( 'trustedUrl', [
    '$sce'
    function( $sce ){
        return function(url){
             //implement necessary logic here
             return $sce.trustAsUrl(url)
        }
    }
])

In your HTML:

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

I prefer using filters over adding methods to controllers as it helps in keeping the controllers lightweight. Filters are especially useful when content needs to be processed.

Answer 2

Is there a way to use the $sce dependency to handle all links in my controller? What would be the best approach to achieve this?

One solution could be creating a filter for this purpose.

.filter( 'trustedUrl', [
    '$sce'
    function( $sce ){
        return function(url){
             //implement necessary logic here
             return $sce.trustAsUrl(url)
        }
    }
])

In your HTML:

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

I prefer using filters over adding methods to controllers as it helps in keeping the controllers lightweight. Filters are especially useful when content needs to be processed.

Using $sce in ng-repeat within Angular configuration parameters

Answer №1

Similar questions

Utilize XML and Javascript to create a captivating donut chart

How can I use jQuery to add styling to my menu options?

What is the best way to pass the ng-repeat value to the controller in AngularJS

Converting Rails application from AngularJS to ERB

Issue with sending data through $http PUT

When JSON contains slashes, JSON.parse will trigger an error

Using Angular JS to apply filters conditionally

How can you integrate external JavaScript libraries into your project using Bower?

After the recent update to version 4.2.0 of @material-ui/core, unexpected react hook errors have been

creating a form using AngularJS within a Bootstrap modal window

Guide on keeping your MongoDB collection up-to-date with Mongoose

Jump to Anchor when Page Reloads

Determine whether all elements in the array are false using Array.every()

Troubleshooting undefined return value in function when passing select list value in AngularJS

Obtain asynchronous view model for component

The configuration error occurred for the `get` action due to an unexpected response. Instead of an object, an array was received

What is the best way to store a username and password within a JavaScript object in ReactJS?

Enhance your checkbox and radio components with React Higher Order Components (H

Combining an HTML file, a D3.js script file, and manually inputting data in the HTML file

I am having difficulty in receiving accurate speech recognition through the microphone while using the Azure Speech to Text service in a