6

I have a variable

x = "http://example.com?a={{a}}&b={{b}}

This variable is then used in a

ng-src={{x}}

Therefore it is important for me to url encode the variables a and b.

What i do currently is:

var func = $interpolate($scope.x);
            var url = func($scope);
            return  $sce.trustAsResourceUrl(url);

My problem is that when a or b contains spaces they are not url encoded.

How can i tell the $interpolate function to url encode the variables a and b?

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
David Michael Gang
  • 7,107
  • 8
  • 53
  • 98

1 Answers1

4

$interpolate service does evaluates the {{}} content and take those value from scope while evaluating scope.

As you want to see the url econded, you are not doing encoding of parameters anywhere. You need to encode your a as well as b in {{}} interpolation using encodeURIComponent of javascript. For that you need to create a wrapper method in scope that will call encodeURIComponent method and return the encode URL, method would be like below.

$scope.encodeContent = function(data){
     return encodeURIComponent(data);
}

Thereafter your URL would look like http://www.example.com/images.jpg?a={{encodeContent(a)}}&b={{encodeContent(b)}}

And while attaching it to src of img tag you need to evaluate interpolation first & then you can make that url as trusted as you are doing now.

Markup

<img src="{{trustedUrl(x)}}" width="50" height="50"/>

Code

$scope.trustedUrl = function(url){
   var interpolatedUrl = $interpolate(url)($scope)
   return $sce.trustAsResourceUrl(interpolatedUrl)
};

Working Plunkr

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • @David Michael Gang does you find any issue with this? – Pankaj Parkar Jun 11 '15 at 13:54
  • The solution is great and accepted:-) .I found a minor issue with this. This is a template which is filled in by our users in a backoffice, and then instead of a={{a}}&b={{b}} they will have to write a={{encodeContent(a)}}&b={{encodeContent(b)}}. A solution would be that in the backoffice i make a regular expression to transform a={{a}}&b={{b}} to a={{encodeContent(a)}}&b={{encodeContent(b)}}. What do you think ? – David Michael Gang Jun 15 '15 at 08:22