Как перезагрузить или перерисовать всю страницу, используя AngularJS


299

После рендеринга всей страницы, основанной на нескольких пользовательских контекстах и ​​сделав несколько $httpзапросов, я хочу, чтобы пользователь мог переключать контексты и перерисовывать все заново (повторная отправка всех $httpзапросов и т. Д.). Если я просто перенаправлю пользователя куда-то еще, все будет работать правильно:

$scope.on_impersonate_success = function(response) {
  //$window.location.reload(); // This cancels any current request
  $location.path('/'); // This works as expected, if path != current_path
};

$scope.impersonate = function(username) {
  return auth.impersonate(username)
    .then($scope.on_impersonate_success, $scope.on_auth_failed);
};

Если я использую $window.location.reload(), то некоторые $httpзапросы auth.impersonate(username), ожидающие ответа, отменяются, поэтому я не могу это использовать. Кроме того, взлом $location.path($location.path())не работает (ничего не происходит).

Есть ли другой способ перерисовки страницы без повторной отправки всех запросов вручную?


Как говорит Альваро Жуан ниже, вам нужно использовать angular-route.js, чтобы заставить это работать. bennadel.com/blog/…
Ивонн Аберроу,

Ответы:


404

Для записи, чтобы заставить angular рендерить текущую страницу, вы можете использовать:

$route.reload();

Согласно документации AngularJS :

Заставляет службу $ route перезагружать текущий маршрут, даже если $ location не изменился.

В результате этого ngView создает новую область видимости, восстанавливает контроллер.


6
Спасибо за комментарий, по некоторым причинам у меня, кажется, немного другое поведение при использовании $route.reload()по сравнению с обычным обновлением. Например, вкладка установлена ​​на первоначальное отображение при обновлении, но когда кажется, что метод перезагрузки перезагружает страницу без настройки вкладки, не знаете, в чем проблема.
Даг Молинью

2
Это также запускает фильтры / сервисы? Получение нежелательного постоянного состояния. Изменить: Все еще проголосовал за правильный ответ на вопрос, и это очень полезно. Спасибо
грант

10
Не забудьте ввести $routeв контроллер, чтобы это работало.
Нил

6
@alphapilgrim Модуль ngRoute больше не является частью ядра angular.js file. Если вы продолжаете использовать $routeProvider, теперь вам нужно будет включить angular-route.jsв свой HTML:
Alvaro Joao

3
$ state.reload (), если вы используете stateProvider
Лалит Рао

314

$route.reload()будет повторно инициализировать контроллеры, но не сервисы. Если вы хотите сбросить все состояние вашего приложения, вы можете использовать:

$window.location.reload();

Это стандартный метод DOM, к которому вы можете получить доступ, внедрив службу $ window .

Если вы хотите обязательно перезагрузить страницу с сервера, например, когда вы используете Django или другой веб-фреймворк и вам нужен новый рендеринг на стороне сервера, передайте trueв качестве параметра reload, как описано в документации . Поскольку это требует взаимодействия с сервером, это будет медленнее, поэтому делайте это только при необходимости

Угловой 2

Вышесказанное относится к угловому 1. Я не использую Угловые 2, выглядит как услуги различны, там есть Router, Locationи DOCUMENT. Я не тестировал там другое поведение


2
Стоит отметить, что в любом случае не следует хранить состояние в службах, чтобы требовать «перезапуска» служб.
Андерсонвом

19
Кто так говорит? Где можно хранить кэшированные данные?
Данза

5
Я наткнулся на множество ошибок из-за того, что данные хранятся в сервисах, что делает их не сохраняемыми, а сохраняемыми. Если мы не говорим о службе кэширования (в этом случае будет интерфейс для очистки), я буду хранить данные вне служб и в контроллерах. Например, можно хранить данные в localStorage и использовать сервис для доступа к ним. Это освободило бы сервис от хранения данных непосредственно в нем.
Андерсонвом

2
@danza Где предполагается хранить кэшированные данные? ... модельный объект? Howver Angular проделал ужасную работу по названию своих составляющих MVCS. Я сохраняю инъекционные объекты модели через API module.value. Затем различные API, которые я определил для службы ng и которые изменяют объект модели, работают больше как команды.
Юзопи

2
Конечно, это сработает, но это не очень хорошая практика. См. Документацию по $ window , причина использования которой объясняется в начале: хотя окно доступно глобально в JavaScript, оно вызывает проблемы с тестируемостью, потому что это глобальная переменная. В angular мы всегда обращаемся к нему через службу $ window, поэтому он может быть переопределен, удален или осмеян для тестирования
danza

38

Для перезагрузки страницы для заданного пути маршрута: -

$location.path('/path1/path2');
$route.reload();

6
Не знаю почему, но метод .reload () здесь не работает. Это ничего не понимает.
Миркобабини

28

Если вы используете угловой UI-маршрутизатор, это будет лучшим решением.

$scope.myLoadingFunction = function() {
    $state.reload();
};

В моем клиентском проекте после размещения на виртуальном хостинге. Когда я перезагружаю свой проект, он дает ошибку 404, чтобы решить эту проблему. Если я добавлю «использовать хэш», то он будет работать с «#», но я не хочу этого, есть ли способ, который может быть решен.
Т. Шашват

24

Ну, может быть, вы забыли добавить «$ route» при объявлении зависимостей вашего контроллера:

app.controller('NameCtrl', ['$scope','$route', function($scope,$route) {   
   // $route.reload(); Then this should work fine.
}]);

9

Просто, чтобы перезагрузить все, используйте window.location.reload (); с angularjs

Проверьте рабочий пример

HTML

<div ng-controller="MyCtrl">  
<button  ng-click="reloadPage();">Reset</button>
</div>

angularJS

var myApp = angular.module('myApp',[]);

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

http://jsfiddle.net/HB7LU/22324/


7

Если вы хотите обновить контроллер при обновлении любых служб, которые вы используете, вы можете использовать это решение:

  • Введите $ state

т.е.

app.controller('myCtrl',['$scope','MyService','$state', function($scope,MyService,$state) {

    //At the point where you want to refresh the controller including MyServices

    $state.reload();

    //OR:

    $state.go($state.current, {}, {reload: true});
}

Это обновит контроллер и HTML, а также вы можете назвать его Refresh или Re-Render .


2
это для пользовательского интерфейса маршрутизатора, а не для угловых.
дгзорноза

6

До Angular 2 (AngularJs)

Через маршрут

$route.reload();

Если вы хотите перезагрузить все приложение

$window.location.reload();

Угловой 2+

import { Location } from '@angular/common';

constructor(private location: Location) {}

ngOnInit() {  }

load() {
    this.location.reload()
}

Или

constructor(private location: Location) {}

ngOnInit() {  }

Methods (){
    this.ngOnInit();
}

К вашему сведению - Angular 7: «Свойство reload не существует для типа« Местоположение »».
ACEG

@Cristina благодарит вашу информацию. Я использую это перед угловым 7
Thilina Sampath

5

Самое простое решение, которое я понял, было:

добавьте '/' к маршруту, который хотите загружать каждый раз при возвращении.

например:

вместо следующего

$routeProvider
  .when('/About', {
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

использование,

$routeProvider
  .when('/About/', { //notice the '/' at the end 
    templateUrl: 'about.html',
    controller: 'AboutCtrl'
  })

2
@PardeepJain Это сработало для меня. Вот почему это ответ. Вы понизили мой ответ?
diyoda_

1
нет, совсем нет, ваш ответ не так плох, чтобы понизить. Удивительно, я не знаю, почему то же самое не работает для меня в angular2.
Пардип Джейн

2
Идеальное решение. Thks!
Симон

Это работает, даже если ваш исходный путь является корнем приложения - /: O Мой маршрут теперь выглядит следующим образом://
MadPhysicist 10.10.16

В Angular 6 это работает после использования # same также может быть использовано и для Angular2. так думаю
Т. Шашват

5

Попробуйте одно из следующего:

$route.reload(); // don't forget to inject $route in your controller
$window.location.reload();
location.reload();

4

Я получил этот рабочий код для удаления кеша и перезагрузки страницы

Посмотреть

        <a class="btn" ng-click="reload()">
            <i class="icon-reload"></i> 
        </a>

контроллер

Инжекторы: $ scope, $ state, $ stateParams, $ templateCache

       $scope.reload = function() { // To Reload anypage
            $templateCache.removeAll();     
            $state.transitionTo($state.current, $stateParams, { reload: true, inherit: true, notify: true });
        };

3

Используйте следующий код без уведомления пользователя о перезагрузке. Это сделает страницу

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$window.location.reload();

-8

У меня была тяжелая борьба с этой проблемой в течение нескольких месяцев, и единственное решение, которое сработало для меня, это:

var landingUrl = "http://www.ytopic.es"; //URL complete
$window.location.href = landingUrl;

4
Вряд ли это отличается от того, $window.location.reload()что, как конкретно упоминает ФП, не работает должным образом в его случае.
Все работники необходимы
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.