Góc mã hóa url trong ng-src và thay thế '/' bằng% 2F và '?' với% 3F

Question

Tôi có một bảng điều khiển Kibana với URL:

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

và tôi có một ứng dụng web mà tôi đang cố gắng để nhúng bảng điều khiển ở trên trong một . Url trong ứng dụng web như sau

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

và trong AngularJs, tôi đang làm:

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

Theo quan điểm của tôi:

<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 lọc như sau:

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

một d Tôi có:

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

Điều này gây / ký tự sau /kibana# được thay thế bằng %2F và ? với %3F gây Kibana không để có thể tìm thấy bảng điều khiển yêu cầu.

Tôi làm cách nào để khắc phục điều này? Cảm ơn!

Answer 1

gì đang xảy ra là AngularJS là thao tác URL trong thanh địa chỉ của bạn, mà bạn đọc với $location.

Vì vậy, vấn đề không xảy ra sau khi bạn đọc url và đặt nó vào iframe với ngSrc nhưng khi góc điều khiển URL gốc trong thanh địa chỉ. Vì vậy, bạn có thể tự giải mã nó với decodeURIComponent()

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

Answer 2

Có vẻ như vấn đề là với phương pháp vsprintf mà bạn đã bỏ lỡ trong câu hỏi câu hỏi của mình nhưng có trong mã fiddle. Tôi đã sửa đổi fiddle và sử dụng nội suy chuỗi javascript thay vì phương thức PHP vsprintf và nó trả lại URL chính xác.

Fix:

Trước

vsprintf("%s://%s/%s", [$location.protocol(), $location.host(), $location.url().replace('/dashboards', '')]); 

Sau

ctrl.dashboardUri = `${$location.protocol()}://${$location.host()}/${$location.url().replace('/dashboards', '')}`