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

Question

我有一个变量

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

然后这个变量被用在

ng-src={{x}}

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

我目前做的是:

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

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

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

Answer 1

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

因为你想看到被拒绝的 url，所以你没有在任何地方对参数进行编码。您需要使用 javascript 的 encodeURIComponent 在 {{}} 插值中对 a 和 b 进行编码。为此，您需要在范围内创建一个包装器方法，该方法将调用 encodeURIComponent 方法并返回编码 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