AngularJs: recarregar página

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

Quero recarregar a página. Como posso fazer isso?

user880386
fonte

Respostas:

265

Você pode usar o reloadmétodo do $routeserviço. Injete $routeno seu controlador e crie um método reloadRouteno seu $scope.

$scope.reloadRoute = function() {
   $route.reload();
}

Então você pode usá-lo no link como este:

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

Este método fará com que a rota atual seja recarregada. Se, no entanto, você deseja executar uma atualização completa, você pode injetar $windowe usar isso:

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


Edição posterior (ui-router):

Conforme mencionado por JamesEddyEdwards e Dunc nas respostas, se você estiver usando o angular-ui / ui-router, poderá usar o seguinte método para recarregar o estado / rota atual. Basta injetar em $statevez de $routee então você tem:

$scope.reloadRoute = function() {
    $state.reload();
};
Alexandrin Rus
fonte
2
Esta é uma boa resposta se você estiver desesperado para angularizar a recarga.
Spikeheap
Como posso alterar esse comportamento globalmente em vez de adicionar uma ação para todos os links
omgpop
@OMGPOP O que exatamente você quer dizer com globalmente para todos os links?
Alexandrin Rus
Quero dizer, para todos os links que você precisa fazer isso. é possível configurar uma vez para todos os links?
OMGPOP
@AlexandrinRus, isso fornece as seguintes iterações [$ rootScope: infdig] 10 $ digest () atingidas. Abortando!
alphapilgrim
52

windowSe o objeto for disponibilizado por meio do $windowserviço para testes e zombarias mais fáceis , você pode optar por algo como:

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

E:

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

Como observação, acho que o $ route.reload () realmente recarrega a página, mas apenas a rota .

Florian F.
fonte
2
Eu recomendo usar em $windowvez de window.
Jeroen
Obrigado pela sua contribuição. Você poderia nos explicar o porquê?
Florian F.
1
Sim, desculpe. É melhor explicado por os $windowdocs , principalmente, é porque reloadPageseria (melhor) testável quando se usa $window.
Jeroen
19
 location.reload(); 

Faz o truque.

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

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

Não há necessidade de rotas ou qualquer coisa apenas js velhos simples

user3806549
fonte
2
adoro a simplicidade!
Shawn de Wet
14

Semelhante à resposta de Alexandrin, mas usando $ state em vez de $ route:

(Da resposta de JimTheDev para SO aqui .)

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

<a ng-click="reloadState()" ... 
Dunc
fonte
9

Se estiver usando o ui-router mais avançado da Angulars que eu recomendaria definitivamente, agora você pode simplesmente usar:

$state.reload();

O que é essencialmente o mesmo que a resposta de Dunc.

JamesEddyEdwards
fonte
5

Minha solução para evitar o loop infinito foi criar outro estado que fez o redirecionamento:

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

Angular 2+

Eu encontrei isso enquanto procurava pelo Angular 2+, então aqui está o caminho:

$window.location.reload();
Nitin Jadhav
fonte
1
isso não é específico para angular, a propósito, sua maneira javascript.
Nitin Jadhav
1

É fácil de usar $route.reload()(não se esqueça de injetar $ route no seu controlador), mas a partir do seu exemplo, você pode usar "href" em vez de "ng-href":

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

Você só precisa usar ng-href para proteger o usuário de links inválidos causados ​​por eles clicarem antes que o Angular substitua o conteúdo das tags {{}}.

spikeheap
fonte
$ route faz parte de ng.route.IRouteService ??
biscoito
1

No Angular 1.5 - depois de tentar algumas das soluções acima que desejavam recarregar apenas os dados sem atualização de página inteira, tive problemas ao carregar os dados corretamente. Notei, porém, que quando vou para outra rota e volto à atual, tudo funciona bem, mas quando quero recarregar a rota atual usando apenas $route.reload()parte do código não é executado corretamente. Depois, tentei redirecionar para a rota atual da seguinte maneira:

$scope.someFuncName = function () {
    //go to another route
    $location.path('/another-route');
};

e na configuração do módulo, adicione outro 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'
     });
}])

e funciona muito bem para mim. Ele não atualiza a página inteira, mas apenas faz com que o controlador e o modelo atuais sejam recarregados. Eu sei que é um pouco hacky, mas essa foi a única solução que encontrei.

vivanov
fonte
uma maneira mais fácil pode ser var reload = $location.url(); $location.url(''); $timeout(function() { $location.url(reload); });; não há necessidade de criar rotas aleatórias. Mas seria interessante ver qual código não é reavaliado para você. Parece que redirectToas resolvefunções par e reexecutam normalmente$route.reload() (veja os console.log).
Hashbrown
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>

e no controlador

 $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 });
                }
            };

e no arquivo de rota

.state('home.pendingApproval', {
        url: '/pendingApproval/:id',
        templateUrl: 'app/components/approvals/pendingApprovalList.html',
        controller: 'pendingApprovalListController'
    })

Portanto, se o ID passado na URL for o mesmo que vem da função chamada clicando na âncora, basta recarregar, ou seguir a rota solicitada.

Por favor, ajude-me a melhorar esta resposta, se isso for útil. Qualquer sugestão é bem vinda.

AMRESH PANDEY
fonte
Isso me levou um mês para descobrir por que a página não recarregar
sam
0

Isso pode ser feito chamando o método reload () do objeto window em JavaScript simples

window.location.reload();
Skillz
fonte
0

Isso pode ser feito chamando o método reload () em JavaScript.

location.reload();
Madhusanka Edirimanna
fonte