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.