在FF上重新加載頁面而不更改頁面

Question

我遇到了這個問題，我無法弄清楚發生了什么：我正在使用Angular和它的路由機制。

所以我有一個網址：

<a href="#/videos/detail/{{video.Id}}" onclick="location.reload();">
    <div class="card-image">
        <img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
    </div>
</a>

你可以看到有一個onclick="location.reload();這適用於Chrome和IE9。但是在FF上它正在做以下事情：

1. 點擊鏈接
2. 網址得到了更新
3. location.reload（）get被稱為頁面正在刷新
4. 網址和角度視圖返回到單擊鏈接的頁面
5. 按'F5'時，正在加載實際頁面和URL

我也嘗試過做location.reload(true); 因為如果路線可能被緩存了，但沒有運氣。

如果您想知道為什么刷新和位置：我需要刷新頁面以便重新加載插件（由於其中的錯誤），這個方法是我能想到的第一個。

編輯：最后通過組合Angular和一些Jquery來完成;

所以最終的HTML看起來像這樣;

<a href="#" class="prevent" ng-click="redirectwithreload('# />videos/detail/'+video.Id)" >
    <div class="card-image">
        <img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
    </div>
</a>

該指令看起來像這樣

.directive('videoCard', function () {
    return {
        restrict: 'E',
        templateUrl: 'partials/directives/video-card.html',
        controller: function ($scope, $element, $location) {
            $scope.redirectWithReload = function (url) {
                var toUrl = location.href.split('#')[0] + url;
                location.replace(toUrl);
            }
        },
        compile: function () {
            return {
                post: function () {
                    $('a.prevent').click(function (e) {
                        e.preventDefault();
                    });
                }
            }
        }
    };
})

class prevent只是為了我的Jquery防止默認並且進行了ng-click，因為如果我需要向url添加更多變量，那么現在很容易做到:)

感謝您的幫助！ 特別是：@mplungjan

Answer 1

如果您將ID存儲在屬性中並使用替換，則可以執行此操作

<a href="#" id="{{video.I‌​d}}"
onclick="location.replace(location.href.split('#')[0]+'#/videos/detail/'+this.id‌​); return false"> 

或純粹主義者（這里是jQuery，我不做Angular）：

<a href="#" class="vids" id="{{video.I‌​d}}"> 

運用

$(function() {
  $(".vids").on("click",function(e) {
    e.preventDefault();
    location.replace(location.href.split('#')[0]+'#/videos/detail/'+this.id‌​); "
  });
});

有關更多參數：

<a href="#" class="vids" data-id="{{video.I‌​d}}" data-target="somewhere"> 

運用

$(function() {
  $(".vids").on("click",function(e) {
    e.preventDefault();
    location.replace(location.href.split('#')[0]+'#/videos/detail/'+
      $(this).data("id‌"​)+'/'+
      $(this).data("target"​));
  });
});

Answer 2

要強制呈現頁面，您可以使用：

$route.reload();

比照 角度文檔 ：

即使$ location未更改，也會導致$ route服務重新加載當前路由。

因此，ngView創建新范圍，重新實例化控制器。

Answer 3

您可以在控制器中添加所需功能的方法：

// view
<a ng-click="redirectWithReload('#/videos/detail/'+video.Id)">

// controller
$scope.redirectWithReload = function(url) {
   $location.url(url); // use $location service
}

Answer 4

您可以在onclick中嘗試以下任何一項：

1. history.go（0）;
2. window.location.href = window.location.href;

請試試：

window.location.href = "your_page.html" + "?" + Date.parse(new Date());

此方法確保不使用任何緩存頁面，並且每當需要通過JS重新加載頁面時我都應用此方法