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

Confirm the Text Box with JavaScript

Error Uncovered: Ionic 2 Singleton Service Experiencing Issues

JavaScript prototypal inheritance concept

Search the table for checked boxes and textboxes that are not empty

How can I test for equality with an array item using v-if in Vue.js?

Unable to display image on React page using relative file path from JSON data

Misplace reference to object during method execution

Why is JavaScript globally modifying the JSON object?

Troubleshooting: AngularJS not displaying $scope variables

Dynamically loading an AngularJS controller

When async/await is employed, the execution does not follow a specific order

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

What is the best way to monitor React hooks efficiently?

Error animation on client-side validation not resetting correctly

How to surround values and keys with double quotes using regular expressions in JavaScript

Acquiring the specific checkbox value using JQuery

What is the best way to trigger a method once an image has completed loading and rendering?

What is the best way to allow someone to chain callback methods on my custom jQuery plugin?

Can a constructor function be utilized as a parameter type in another function within TypeScript?

The capability to scroll within a stationary container