<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Я хочу перезагрузить страницу. Как я могу это сделать?
<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Я хочу перезагрузить страницу. Как я могу это сделать?
Вы можете использовать метод reload
службы $route
. Inject $route
в вашем контроллере, а затем создайте метод reloadRoute
на $scope
.
$scope.reloadRoute = function() {
$route.reload();
}
Затем вы можете использовать его по ссылке:
<a ng-click="reloadRoute()" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Этот метод приведет к перезагрузке текущего маршрута. Если вы хотите выполнить полное обновление, вы можете ввести $window
и использовать это:
$scope.reloadRoute = function() {
$window.location.reload();
}
Редактирование позже (ui-router):
Как упоминалось JamesEddyEdwards и Dunc в своих ответах, если вы используете angular -ui/ui-router, вы можете использовать следующий метод для перезагрузки текущего состояние/маршрут. Просто введите $state
вместо $route
, а затем у вас есть:
$scope.reloadRoute = function() {
$state.reload();
};
window
объект доступен через $window
сервис для более легкого тестирования и издевательств, вы можете пойти с чем-то вроде:
$scope.reloadPage = function(){$window.location.reload();}
И:
<a ng-click="reloadPage" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
В качестве побочного примечания я не думаю, что $route.reload() фактически перезагружает страницу, но только маршрут.
location.reload();
Есть трюк.
<a ng-click="reload()">
$scope.reload = function()
{
location.reload();
}
Нет необходимости в маршрутах или что-то просто старое js
Как и Александрин, ответьте, но используя $state, а не $route:
(Из JimTheDev SO ответьте здесь.)
$scope.reloadState = function() {
$state.go($state.current, {}, {reload: true});
}
<a ng-click="reloadState()" ...
Если использовать Angulars более продвинутые ui-router, которые я бы рекомендовал, вы теперь можете просто использовать:
$state.reload();
Что по сути делает то же самое, что и ответ Dunc.
Мое решение избежать бесконечного цикла состояло в создании другого состояния, которое сделало перенаправление:
$stateProvider.state('app.admin.main', {
url: '/admin/main',
authenticate: 'admin',
controller: ($state, $window) => {
$state.go('app.admin.overview').then(() => {
$window.location.reload();
});
}
});
Достаточно просто использовать $route.reload()
(не забудьте ввести $route в ваш контроллер), но из вашего примера вы можете просто использовать "href" вместо "ng-href":
<a href="" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Вам нужно только использовать ng-href для защиты пользователя от недействительных ссылок, вызванных ими, прежде чем Angular заменит содержимое тегов {{}}.
В Angular 1.5 - после попытки некоторых из вышеперечисленных решений, требующих перезагрузить только данные без полного обновления страницы, у меня возникли проблемы с правильной загрузкой данных. Я заметил, что когда я перехожу на другой маршрут, а затем возвращаюсь обратно к текущему, все работает нормально, но когда я хочу только перезагрузить текущий маршрут с помощью $route.reload()
, тогда некоторая часть кода не будет выполнена должным образом. Затем я попытался перенаправить на текущий маршрут следующим образом:
$scope.someFuncName = function () {
//go to another route
$location.path('/another-route');
};
и в конфигурации модуля добавьте еще один when
:
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/first-page', {
templateUrl: '/first-template',
controller: 'SomeCtrl'
}).when('/another-route', {//this is the new "when"
redirectTo: '/first-page'
});
}])
и он отлично подходит для меня. Он не обновляет всю страницу, а только вызывает перезагрузку текущего контроллера и шаблона. Я знаю, что это немного хаки, но это единственное решение, которое я нашел.
<a title="Pending Employee Approvals" href="" ng-click="viewPendingApprovals(1)">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="button_badge">{{pendingEmployeeApprovalCount}}</span>
</a>
и в контроллере
$scope.viewPendingApprovals = function(type) {
if (window.location.hash.substring(window.location.hash.lastIndexOf('/') + 1, window.location.hash.length) == type) {
location.reload();
} else {
$state.go("home.pendingApproval", { id: sessionStorage.typeToLoad });
}
};
и в файле маршрута
.state('home.pendingApproval', {
url: '/pendingApproval/:id',
templateUrl: 'app/components/approvals/pendingApprovalList.html',
controller: 'pendingApprovalListController'
})
Итак, если идентификатор, переданный в URL-адресе, аналогичен тому, что исходит от функции, вызванной нажатием на якорь, а затем просто перезагрузите, иначе следуйте запрошенному маршруту.
Пожалуйста, помогите мне улучшить этот ответ, если это поможет. Любые предложения приветствуются.
Угловой 2+
Я нашел это во время поиска Angular 2+, поэтому вот путь:
window.location.reload();