在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() 被调用，页面正在刷新
4. url和角度视图，返回点击链接的页面
5. 按下“F5”时，实际页面和网址正在加载

我也尝试过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();
                    });
                }
            }
        }
    };
})

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();

参见。 Angular Documentation：

即使 $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 重新加载页面时我都会应用此方法