Angular对ng-src中的url进行编码,并用%2F和'？'替换'/' 与%3F

Question

我有一个带URL的Kibana仪表板:

/logquery/app/kibana#/dashboard/Some-Dashboard?someParameters

我有一个Web应用程序,我试图在上面嵌入仪表板<iframe>.Web应用程序中的URL如下所示

/dashboards/logquery/app/kibana#/dashboard/Some-Dashboard?someParameters

在AngularJs中,我正在做:

ctrl.dashboardUrl = $location.url().replace('/dashboards', '');

在我看来:

<div ng-controller="DashboardCtrl as ctrl">
    <div class="iframe-container">
        <iframe ng-src="{{ctrl.dashboardUrl | trustAsUrl}}"
                height="100%"
                width="100%"
                ng-cloak
                frameborder="0"
                marginheight="0"
                marginwidth="0"></iframe>
    </div>
</div>

trustAsUrl 过滤器如下:

filtersGroup.filter('trustAsUrl', [
    '$sce',
    function ($sce) {
        return function (val) {
            return $sce.trustAsResourceUrl(val);
        };
    }]);

我有:

$locationProvider.html5Mode({
                enabled: true,
                requireBase: false,
                rewriteLinks: false
            });

这会导致/后面的字符/kibana#与被替换%2F,并?有%3F导致Kibana没有能够找到所需的仪表板.

我怎么能克服这个？谢谢!

Answer 1

发生的事情是 AngularJS 正在操纵地址栏中的 URL，您可以使用$location.

所以问题不是在你读取url并将其放入with中之后发生的iframe，ngSrc而是当Angular在地址栏中操作原始URL时发生的。所以你可以使用decodeURIComponent()手动解码它

return $sce.trustAsResourceUrl(decodeURIComponent(val));