<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Quiero recargar la página. ¿Cómo puedo hacer esto?
<a ng-href="#" class="navbar-brand" title="home" data-translate>PORTAL_NAME</a>
Quiero recargar la página. ¿Cómo puedo hacer esto?
Respuestas:
Puedes usar el reload
método del $route
servicio. Inyecte $route
en su controlador y luego cree un método reloadRoute
en 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 $window
y 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 $state
lugar de $route
y luego tienes:
$scope.reloadRoute = function() {
$state.reload();
};
window
El objeto está disponible a través del $window
servicio 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 .
$window
lugar de window
.
$window
documentos , principalmente es porque reloadPage
sería (mejor) comprobable cuando se utiliza $window
.
location.reload();
Hace el truco.
<a ng-click="reload()">
$scope.reload = function()
{
location.reload();
}
No hay necesidad de rutas ni nada simplemente js viejos
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.
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();
});
}
});
Angular 2+
Encontré esto mientras buscaba Angular 2+, así que aquí está la forma:
$window.location.reload();
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 {{}}.
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é.
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 redirectTo
s y las resolve
funciones se vuelven a ejecutar de forma normal$route.reload()
(mira el archivo console.log's).
<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 se puede hacer llamando al método reload () en JavaScript.
location.reload();