Перезагрузка страницы на FF не меняет страницу
у меня есть эта проблема, что я не могу понять, что происходит: Я использую Angular, и это механизм маршрутизации.
Итак, у меня есть url:
<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 он делает следующее:
- нажмите на ссылку
- url get обновлен
- расположение.reload () get называется страница обновляется
- url и угловой вид, go возвращается на страницу, где нажата ссылка
- при нажатии " F5 " фактическая страница и url загружаются в
Я также попытался сделать location.reload(true);
если возможно, маршрут был кэширован или так, но не повезло.
в случае, если вам интересно, почему обновление и расположение: Мне нужно обновить страницу для перезагрузки плагина (из-за ошибки в нем), и этот метод был первым, о котором я мог подумать.
EDIT: В конце концов сделано, сделав сочетание углового и некоторого 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, потому что, если мне когда-нибудь понадобится добавить больше vars в url-адрес, теперь это очень легко сделать :)
Спасибо за помощь! особенно: @mplungjan
4 ответов
если вы храните идентификатор в атрибуте и используете replace, вы можете сделать
<a href="#" id="{{video.Id}}"
onclick="location.replace(location.href.split('#')[0]+'#/videos/detail/'+this.id); return false">
или для пуриста (здесь jQuery, я не делаю угловой):
<a href="#" class="vids" id="{{video.Id}}">
используя
$(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.Id}}" 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"));
});
});
чтобы принудительно отобразить страницу, вы можете использовать:
$route.reload();
cf. Угловое Документации :
заставляет $route service перезагрузить текущий маршрут, даже если $location не изменился.
в результате этого ngView создает новую область, восстанавливает контроллер.
вы можете добавить метод в контроллер с желаемой функциональности:
// view
<a ng-click="redirectWithReload('#/videos/detail/'+video.Id)">
// controller
$scope.redirectWithReload = function(url) {
$location.url(url); // use $location service
}