AngularJs: перезагрузить страницу


135
<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>

Я хочу перезагрузить страницу. Как я могу это сделать?

Ответы:


265

Вы можете использовать reloadметод $routeсервиса. Введите $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();
};

2
Это хороший ответ, если вы отчаянно хотите преобразовать перезагрузку в Angular.
spikeheap

Как я могу изменить это поведение глобально вместо добавления действия ко всем ссылкам
OMGPOP

@OMGPOP Что именно вы имеете в виду, говоря глобально для всех ссылок?
Alexandrin Rus

я имею в виду, что для всех ссылок вам нужно это сделать. можно ли настроить один раз для всех ссылок?
OMGPOP

@AlexandrinRus это дает мне следующие [$ rootScope: infdig] 10 итераций $ digest (). Aborting!
alphapilgrim

52

windowОбъект сделан доступным через $windowсервис для облегчения тестирования и насмешек , вы можете пойти с чем-то вроде:

$scope.reloadPage = function(){$window.location.reload();}

И :

<a ng-click="reloadPage"  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

Как примечание, я не думаю, что $ route.reload () на самом деле перезагружает страницу, а только маршрут .


2
Я рекомендую использовать $windowвместо window.
Jeroen

Спасибо за ваш вклад. Не могли бы вы объяснить нам, почему?
Флориан Ф.

1
Да, прости. Это лучше всего объясняется в $windowдокументации , в основном это потому , что reloadPageбыло бы (лучше) проверяемым , когда он использует $window.
Jeroen

19
 location.reload(); 

Делает трюк.

<a ng-click="reload()">

$scope.reload = function()
{
   location.reload(); 
}

Не нужны маршруты или что-то еще, просто старый js


2
люблю простоту!
Shawn de Wet,

14

Аналогично ответу Александрина, но с использованием $ state, а не $ route:

(Из ответа JimTheDev здесь SO .)

$scope.reloadState = function() {
   $state.go($state.current, {}, {reload: true});
}

<a ng-click="reloadState()" ... 

9

Если вы используете более продвинутый ui-маршрутизатор Angulars, который я определенно рекомендую, теперь вы можете просто использовать:

$state.reload();

Что по сути делает то же самое, что и ответ Дунк.


5

Мое решение избежать бесконечного цикла состояло в том, чтобы создать другое состояние, в котором было выполнено перенаправление:

$stateProvider.state('app.admin.main', {
    url: '/admin/main',
    authenticate: 'admin',
    controller: ($state, $window) => {
      $state.go('app.admin.overview').then(() => {
        $window.location.reload();
      });
    }
  });


1

Его достаточно просто использовать $route.reload()(не забудьте ввести $ route в ваш контроллер), но из вашего примера вы можете просто использовать «href» вместо «ng-href»:

<a href=""  class="navbar-brand" title="home"  data-translate>PORTAL_NAME</a>

Вам нужно только использовать ng-href, чтобы защитить пользователя от недействительных ссылок, вызванных их щелчком до того, как Angular заменил содержимое тегов {{}}.


$ route является частью ng.route.IRouteService ??
взломщик

1

На 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'
     });
}])

и это прекрасно работает для меня. Он не обновляет всю страницу, а только вызывает перезагрузку текущего контроллера и шаблона. Я знаю, что это немного глупо, но это было единственное решение, которое я нашел.


более простой способ может быть var reload = $location.url(); $location.url(''); $timeout(function() { $location.url(reload); });; не нужно создавать случайные маршруты. Но было бы интересно посмотреть, какой код не переоценивает для вас. Похоже, что даже redirectTos и resolveфункции повторно выполняются в обычном режиме$route.reload() (см. Console.log).
Хэшброун

1
<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-адресе, совпадает с тем, что исходит от функции, вызываемой щелчком якоря, просто перезагрузите, иначе следуйте запрошенному маршруту.

Пожалуйста, помогите мне улучшить этот ответ, если это поможет. Любые, предложения приветствуются.


Мне потребовался один месяц, чтобы понять, почему страница не перезагружается
Сэм,

0

Это можно сделать, вызвав метод reload () объекта окна в простом JavaScript.

window.location.reload();


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.