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

这个类prevent只是为了我的Jquery来防止默认并且进行了ng-click,因为如果我需要在url中添加更多变量,那么现在很容易做到:)

感谢您的帮助!特别是:@mplungjan

Answer 1

如果将 ID 存储在属性中并使用替换，则可以执行以下操作

\n\n

<a href="#" id="{{video.I\xe2\x80\x8c\xe2\x80\x8bd}}"\nonclick="location.replace(location.href.split(\'#\')[0]+\'#/videos/detail/\'+this.id\xe2\x80\x8c\xe2\x80\x8b); return false"> \n

\n\n

或者对于纯粹主义者（这里是 jQuery，我不使用 Angular）：

\n\n

<a href="#" class="vids" id="{{video.I\xe2\x80\x8c\xe2\x80\x8bd}}"> \n

\n\n

使用

\n\n

$(function() {\n  $(".vids").on("click",function(e) {\n    e.preventDefault();\n    location.replace(location.href.split(\'#\')[0]+\'#/videos/detail/\'+this.id\xe2\x80\x8c\xe2\x80\x8b); "\n  });\n});\n

\n\n

更多参数：

\n\n

<a href="#" class="vids" data-id="{{video.I\xe2\x80\x8c\xe2\x80\x8bd}}" data-target="somewhere"> \n

\n\n

使用

\n\n

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

\n