AngularJS multiple expressions concatenating in interpolation with a URL

by

An alternative to @tasseKATT’s answer (which doesn’t require a controller function) is to use string concatenation directly in the expression a filter:

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

<div ng-src="https://stackoverflow.com/questions/23405162/{{ video.id.videoId" youtubeEmbedUrl }}"></div>

I’ve found this particularly useful when using SVG icon sprites, which requires you to use the xlink:href attribute on the SVG use tag – this is subject to the same SCE rules. Repeating the controller function everywhere I needed to use a sprite seemed silly so I used the filter method instead.

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

<svg><use xlink:href="https://stackoverflow.com/questions/23405162/{{ type.key" svgIconCardHref }}"></use></svg>

Note: I had previously tried just simple string concatenation inside the expression. However this led to some unexpected behaviour where the browser would interpret the expression before Angular had a chance to parse it and replace with the real href. Since there is no ng-src equivalent for the use tag’s xlink:href I opted for the filter, which seems to have solved the issue.

More Related Contents:

  1. Failed to execute ‘postMessage’ on ‘DOMWindow’: https://www.youtube.com !== http://localhost:9000
  2. What is Hungarian Notation? [duplicate]
  3. How do I bind to list of checkbox values with AngularJS?
  4. How to extend an existing JavaScript array with another array, without creating a new array
  5. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
  6. Recursion in Angular directives
  7. how to split the ng-repeat data with three columns using bootstrap
  8. What is the correct syntax of ng-include?
  9. What is the difference between compile and link function in angularjs
  10. AngularJS – ng-disabled not working for Anchor tag
  11. AngularJS – how to get an ngRepeat filtered result reference
  12. What is the $$ (double dollar sign) used for in angular?
  13. How do you serve a file for download with AngularJS or Javascript?
  14. Angular 2: Callback when ngFor has finished
  15. adding and removing classes in angularJs using ng-click
  16. How does the $resource `get` function work synchronously in AngularJS?
  17. How to debug angular protractor tests in WebStorm
  18. show validation error messages on submit in angularjs
  19. How do I set default value of select box in angularjs
  20. ‘load’ event not firing when iframe is loaded in Chrome
  21. $watch’ing for data changes in an Angular directive
  22. AngularJS: How do I manually set input to $valid in controller?
  23. Using jqgrid with popover from angular ui bootstrap
  24. $http.get(…).success is not a function
  25. Open links in new window using AngularJS
  26. What are “decorators” and how are they used?
  27. AngularJS ng-src inside of iframe
  28. WARNING: Tried to load angular more than once. Angular JS
  29. Passing parameter inside $location.path in Angular
  30. How to create an Array with AngularJS’s ng-model

Leave a Comment