AngularJs: Recargar página


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

Quiero recargar la página. ¿Cómo puedo hacer esto?

Respuestas:


265

Puedes usar el reloadmétodo del $routeservicio. Inyecte $routeen su controlador y luego cree un método reloadRouteen su $scope.

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

Luego puede usarlo en el enlace de esta manera:

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

Este método hará que la ruta actual se vuelva a cargar. Sin embargo, si desea realizar una actualización completa, puede inyectar $windowy usar eso:

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


Edición posterior (ui-router):

Como lo mencionaron JamesEddyEdwards y Dunc en sus respuestas, si está usando angular-ui / ui-router puede usar el siguiente método para recargar el estado / ruta actual. Simplemente inyecta en $statelugar de $routey luego tienes:

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

2
Esta es una buena respuesta si estás desesperado por Angularizar la recarga.
spikeheap

¿Cómo puedo cambiar este comportamiento globalmente en lugar de agregar una acción a todos los enlaces
OMGPOP

@OMGPOP ¿Qué quiere decir exactamente con global para todos los enlaces?
Alexandrin Rus

Quiero decir, para todos los enlaces necesitas hacer esto. ¿Es posible configurar una vez para todos los enlaces?
OMGPOP

@AlexandrinRus esto me da las siguientes iteraciones [$ rootScope: infdig] 10 $ digest () alcanzadas. Abortando!
alphapilgrim

52

windowEl objeto está disponible a través del $windowservicio para facilitar las pruebas y burlas , puede ir con algo como:

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

Y:

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

Como nota al margen, no creo que $ route.reload () realmente vuelva a cargar la página, sino solo la ruta .


2
Recomiendo usar en $windowlugar de window.
Jeroen

Gracias por tu aporte. ¿Nos explicaría por qué?
Florian F.

1
Si, lo siento. Es mejor explicada por los $windowdocumentos , principalmente es porque reloadPagesería (mejor) comprobable cuando se utiliza $window.
Jeroen

19
 location.reload(); 

Hace el truco.

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

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

No hay necesidad de rutas ni nada simplemente js viejos


2
Me encanta la simplicidad!
Shawn de Wet

14

Similar a la respuesta de Alexandrin, pero usando $ state en lugar de $ route:

(De la respuesta SO de JimTheDev aquí ).

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

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

9

Si usa Angulars ui-router más avanzado que definitivamente recomendaría, ahora puede simplemente usar:

$state.reload();

Que esencialmente está haciendo lo mismo que la respuesta de Dunc.


5

Mi solución para evitar el bucle infinito fue crear otro estado que haya realizado la redirección:

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

2

Angular 2+

Encontré esto mientras buscaba Angular 2+, así que aquí está la forma:

$window.location.reload();

1
esto no es específico de angular, por cierto, su forma de JavaScript.
Nitin Jadhav

1

Es bastante fácil de usar $route.reload()(no olvides inyectar $ route en tu controlador), pero a partir de tu ejemplo, puedes usar "href" en lugar de "ng-href":

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

Solo necesita usar ng-href para proteger al usuario de enlaces inválidos causados ​​por ellos haciendo clic antes de que Angular haya reemplazado el contenido de las etiquetas {{}}.


$ route es parte de ng.route.IRouteService ??
galleta

1

En Angular 1.5: después de probar algunas de las soluciones anteriores que desean volver a cargar solo los datos sin actualizar la página completa, tuve problemas para cargar los datos correctamente. Sin embargo, noté que cuando voy a otra ruta y luego vuelvo a la corriente, todo funciona bien, pero cuando solo quiero volver a cargar la ruta actual usando $route.reload(), parte del código no se ejecuta correctamente. Luego intenté redirigir a la ruta actual de la siguiente manera:

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

y en la configuración del módulo, agregue otro 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'
     });
}])

Y funciona bien para mí. No actualiza toda la página, pero solo hace que el controlador y la plantilla actuales se recarguen. Sé que es un poco hacky, pero esa fue la única solución que encontré.


una forma más fácil podría ser var reload = $location.url(); $location.url(''); $timeout(function() { $location.url(reload); });; No es necesario crear rutas aleatorias. Pero sería interesante ver qué código no reevalúa para usted. Parece que incluso redirectTos y las resolvefunciones se vuelven a ejecutar de forma normal$route.reload() (mira el archivo console.log's).
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>

y en el 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 });
                }
            };

y en el archivo de ruta

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

Entonces, si la identificación pasada en la url es la misma que la que proviene de la función llamada haciendo clic en el ancla, simplemente vuelva a cargarla, de lo contrario siga la ruta solicitada.

Por favor, ayúdame a mejorar esta respuesta, si esto es útil. Cualquiera, sugerencias son bienvenidas.


Esto me tomó un mes para entender por qué la página no se está recargando
Sam

0

Esto se puede hacer llamando al método reload () del objeto de ventana en JavaScript simple

window.location.reload();


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.