Combining multiple AngularJS expressions to form a URL within an interpolation statement

Question

Combining multiple AngularJS expressions to form a URL within an interpolation statement

While this explanation may be lengthy, I appreciate your patience as I try to articulate the issue at hand. The error I'm currently encountering is as follows:

Error: [$interpolate:noconcat] Error while interpolating: 
Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.  
See http://docs.angularjs.org/api/ng.$sce

Despite extensively reading through the documentation, I have yet to discover a solution for my predicament.

The scenario involves me utilizing $http.get on a private online source containing data structured similarly to a JSON file (data cannot be modified). Here's an example snippet of how the data appears:

...
"items": [
  {
   "kind": "youtube#searchResult",
   "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/A7os41NAa_66TUu-1I-VxH70Rp0\"",
   "id": {
      "kind": "youtube#video",
      "videoID": "MEoSax3BEms"
      },
   },
   {
    "kind": "youtube#searchResult",
    "etag": "\"N5Eg36Gl054SUNiWWc-Su3t5O-k/VsH9AmnQecyYBLJrl1g3dhewrQo\"",
    "id": {
       "kind": "youtube#video",
       "videoID": "oUBqFlRjVXU"
       },
    },
...

My objective is to interpolate the videoId of each item into an HTML iframe that embeds the respective YouTube video. In my controller.js file, I'm setting the promise object after the $http.get request like so:

$http.get('privatesource').success(function(data) {
  $scope.videoList = data.items;
});

As a result, the variable "$scope.videoList" is now linked to data.items, which consists of numerous video elements. Within my HTML file, I can access the videoID for each video using:

<ul class="videos">
  <li ng-repeat="video in videoList">
    <span>{{video.id.videoID}}</span>
  </li>
</ul>

This successfully displays all the video IDs. However, attempting to concatenate these values with a URL such as proves unsuccessful.

<div ng-repeat="video in videoList">
    <iframe id="ytplayer" type="text/html" width="640" height="360" 
     ng-src="https://www.youtube.com/embed/{{video.id.videoId}}" 
     frameborder="0" allowfullscreen></iframe>
</div>

Is there a way to effectively interpolate the videoID into the YouTube URL? Despite trying to whitelist it using $sceDelegateProvider as shown below, the issue persists:

$sceDelegateProvider.resourceUrlWhitelist([
  'self',
  'https://www.youtube.com/**']);

Any assistance offered would be greatly appreciated. Thank you!

javascript angularjs youtube concatenation interpolation

Answer 1

Answer №1

A different approach from @tasseKATT's solution (without the need for a controller function) is utilizing a filter:

angular.module('myApp')
  .filter('youtubeEmbedUrl', function ($sce) {
    return function(videoId) {
      return $sce.trustAsResourceUrl('http://www.youtube.com/embed/' + videoId);
    };
  });

<div ng-src="{{ video.id.videoId | youtubeEmbedUrl }}"></div>

This method came in handy when dealing with SVG icon sprites that require using the xlink:href attribute - which is also subject to SCE rules. Instead of repeating a controller function, I opted for the filter.

angular.module('myApp')
  .filter('svgIconCardHref', function ($sce) {
    return function(iconCardId) {
      return $sce.trustAsResourceUrl('#s-icon-card-' + iconCardId);
    };
  });

<svg><use xlink:href="{{ type.key | svgIconCardHref }}"></use></svg>

Please note that attempting simple string concatenation within the expression caused unexpected browser behavior. To solve this issue, I used filters instead of relying on Angular's parsing mechanisms for specific attributes like xlink:href.

Answer 2

A different approach from @tasseKATT's solution (without the need for a controller function) is utilizing a filter:

angular.module('myApp')
  .filter('youtubeEmbedUrl', function ($sce) {
    return function(videoId) {
      return $sce.trustAsResourceUrl('http://www.youtube.com/embed/' + videoId);
    };
  });

<div ng-src="{{ video.id.videoId | youtubeEmbedUrl }}"></div>

This method came in handy when dealing with SVG icon sprites that require using the xlink:href attribute - which is also subject to SCE rules. Instead of repeating a controller function, I opted for the filter.

angular.module('myApp')
  .filter('svgIconCardHref', function ($sce) {
    return function(iconCardId) {
      return $sce.trustAsResourceUrl('#s-icon-card-' + iconCardId);
    };
  });

<svg><use xlink:href="{{ type.key | svgIconCardHref }}"></use></svg>

Please note that attempting simple string concatenation within the expression caused unexpected browser behavior. To solve this issue, I used filters instead of relying on Angular's parsing mechanisms for specific attributes like xlink:href.

Answer 3

Answer №2

Starting from version 1.2, only one expression can be bound to *[src], *[ng-src], or action. More information on this change can be found here.

Here is an alternative approach:

In your Controller:

$scope.getIframeSrc = function (videoId) {
  return 'https://www.youtube.com/embed/' + videoId;
};

HTML:

ng-src="{{getIframeSrc(video.id.videoId)}}"

Remember to whitelist it as before, otherwise you may encounter the error message

locked loading resource from url not allowed by $sceDelegate policy

.

Answer 4

Starting from version 1.2, only one expression can be bound to *[src], *[ng-src], or action. More information on this change can be found here.

Here is an alternative approach:

In your Controller:

$scope.getIframeSrc = function (videoId) {
  return 'https://www.youtube.com/embed/' + videoId;
};

HTML:

ng-src="{{getIframeSrc(video.id.videoId)}}"

Remember to whitelist it as before, otherwise you may encounter the error message

locked loading resource from url not allowed by $sceDelegate policy

.

Answer 5

Answer №3

within the controller script:

app.filter('trustAsResourceUrl', ['$sce', function ($sce) {
    return function (val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

within the html template:

ng-src="('https://www.youtube.com/embed/' + video.id.videoId) | trustAsResourceUrl"

Answer 6

within the controller script:

app.filter('trustAsResourceUrl', ['$sce', function ($sce) {
    return function (val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

within the html template:

ng-src="('https://www.youtube.com/embed/' + video.id.videoId) | trustAsResourceUrl"

Answer 7

Answer №4

Using angular.min.1.5.8.js is what I prefer. When dealing with a form problem, I found success in replacing the attribute action=URL with ng-action=URL.

Please be aware that using ng-action as a directive will not produce the desired outcome.

Answer 8

Using angular.min.1.5.8.js is what I prefer. When dealing with a form problem, I found success in replacing the attribute action=URL with ng-action=URL.

Please be aware that using ng-action as a directive will not produce the desired outcome.

Combining multiple AngularJS expressions to form a URL within an interpolation statement

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

KnockoutJS is unable to assign a negative value to an input field

Retrieving entities from a text

Having some trouble with node.js and the fs module when checking if a file exists. Let

Assigning a variable in jQuery to a PHP variable that has not been defined can halt the script

Looking to implement a star rating feature in Vue.js 2?

Storing and retrieving objects in cookies using AngularJS

Ways to stop jQuery from stripping the <script> elements

Allow editing for only a specific part of a text box

Updating the background of a div in HTML through the power of JavaScript

changing the RadioButtonList to preselect a default value

Passing the index in React Native

Apply jQuery styling to new select box on page in order to maintain consistent styling throughout

What is the method to have the text cursor within a text field start a few pixels in?

Regex for US zip code with an optional format

The input box is not properly filled with the complete string using protractor sendKeys

Error: Attempting to access property 'setData' of an undefined object results in a TypeError [Slider]

Having difficulty displaying form errors using handlebars

Notification for Unsuccessful Login Attempt on the Client Side

Change the value of a single element in an array using a component in ReactJS

Ways to extract specific HTML from a jQuery element