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 编码？

score 4 · Accepted Answer

$interpolate服务确实评估{{}}内容并在评估范围时从范围中获取这些价值。

当您想查看 url 时，您没有在任何地方对参数进行编码。您需要使用javascript对您的a以及插值进行编码。为此，您需要在范围内创建一个包装方法，该方法将调用方法并返回编码，方法如下所示。b{{}}encodeURIComponentencodeURIComponentURL

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

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

在将其附加到标签时src，img您需要先评估插值，然后您可以使该 url 像现在一样受信任。

标记

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

代码

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

1 回答 1