如何url 使用$interpolate 对模板变量的表达式进行编码？

Question

我有一个变量

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

此变量随后用于

ng-src={{x}}

因此，url 对变量 a 和 b 进行编码对我来说很重要。

我目前做的是：

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

我的问题是，当 a 或 b 包含空格时，它们没有 url 编码。

如何告诉 $interpolate 函数 url 对变量 a 和 b 进行编码？

Answer 1

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

如你所愿看到 url 同意，你没有在任何地方进行参数编码。您需要使用 javascript 的 encodeURIComponent 在 {{}} 插值中对 a 和 b 进行编码。为此，您需要在范围内创建一个包装器方法，它将调用 encodeURIComponent 方法和 return 编码 URL，方法如下所示。

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

此后你的 URL 看起来像 http://www.example.com/images.jpg?a={{encodeContent(a)}}&b={{encodeContent(b)}}

并且在将其附加到 img 标签的 src 时，您需要先评估插值，然后才能使 url 像现在一样可信。

标记

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

代码

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

Working Plunkr

如何url 使用$interpolate 对模板变量的表达式进行编码？

how to url encode expressions of template variable with $interpolate?

javascript

angularjs

angularjs-interpolate