javascript - ejemplos - Cómo implementar history.back() en angular.js
angularjs tutorial (10)
Angular 4:
/* typescript */
import { Location } from ''@angular/common'';
// ...
@Component({
// ...
})
export class MyComponent {
constructor(private location: Location) { }
goBack() {
this.location.back(); // go back to previous location
}
}
Tengo una directiva que es el encabezado del sitio con el botón Atrás y quiero hacer clic para volver a la página anterior. ¿Cómo lo hago de forma angular?
Yo he tratado:
<header class="title">
<a class="back" ng-class="icons"><img src="../media/icons/right_circular.png" ng-click="history.back()" /></a>
<h1>{{title}}</h1>
<a href="/home" class="home" ng-class="icons"><img src="../media/icons/53-house.png" /></a>
</header>
y esta es la directiva js:
myApp.directive(''siteHeader'', function () {
return {
restrict: ''E'',
templateUrl: ''partials/siteHeader.html'',
scope: {
title: ''@title'',
icons: ''@icons''
}
};
});
pero nada pasa. Busqué en la API de angular.js aproximadamente $location pero no encontré nada sobre el botón Atrás o history.back()
.
En AngularJS2 encontré una nueva forma, tal vez es lo mismo pero en esta nueva versión:
import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from ''angular2/router'';
(...)
constructor(private _router: Router, private _location: Location) {}
onSubmit() {
(...)
self._location.back();
}
Después de mi función, puedo ver que mi aplicación va a la ubicación de uso de la página anterior desde angular2 / enrutador.
https://angular.io/docs/ts/latest/api/common/index/Location-class.html
En caso de que sea útil ... estaba alcanzando las "10 $ digest () iteraciones alcanzadas. ¡Aborto!" error al usar $ window.history.back (); con IE9 (funciona bien en otros navegadores, por supuesto).
Lo tengo para trabajar usando:
setTimeout(function() {
$window.history.back();
},100);
Hubo un error de sintaxis Prueba esto y debería funcionar:
directives.directive(''backButton'', function(){
return {
restrict: ''A'',
link: function(scope, element, attrs) {
element.bind(''click'', function () {
history.back();
scope.$apply();
});
}
}
});
Idealmente, use una directiva simple para mantener los controladores libres de la ventana $ redundante
app.directive(''back'', [''$window'', function($window) {
return {
restrict: ''A'',
link: function (scope, elem, attrs) {
elem.bind(''click'', function () {
$window.history.back();
});
}
};
}]);
Use esto:
<button back>Back</button>
Las rutas angulares miran la ubicación del navegador, por lo que simplemente usar window.history.back()
al hacer clic en algo funcionaría.
HTML:
<div class="nav-header" ng-click="doTheBack()">Reverse!</div>
JS:
$scope.doTheBack = function() {
window.history.back();
};
Normalmente creo una función global llamada ''$ back'' en mi controlador de aplicación, que usualmente pongo en la etiqueta del cuerpo.
angular.module(''myApp'').controller(''AppCtrl'', [''$scope'', function($scope) {
$scope.$back = function() {
window.history.back();
};
}]);
Luego, en cualquier lugar de mi aplicación, puedo hacer <a ng-click="$back()">Back</a>
(Si desea que sea más comprobable, inserte el servicio $ window en su controlador y use $window.history.back()
).
Necesita usar una función de enlace en su directiva:
link: function(scope, element, attrs) {
element.on(''click'', function() {
$window.history.back();
});
}
Ver jsFiddle .
O simplemente puede usar el código de javascript :
onClick="javascript:history.go(-1);"
Me gusta:
<a class="back" ng-class="icons">
<img src="../media/icons/right_circular.png" onClick="javascript:history.go(-1);" />
</a>
Otra solución agradable y reutilizable es crear una directiva como this :
app.directive( ''backButton'', function() {
return {
restrict: ''A'',
link: function( scope, element, attrs ) {
element.on( ''click'', function () {
history.back();
scope.$apply();
} );
}
};
} );
entonces solo úsalo así:
<a href back-button>back</a>
Para mí, mi problema era que necesitaba navegar hacia atrás y luego pasar a otro estado. Así que usar $window.history.back()
no funcionó porque por alguna razón la transición ocurrió antes de que ocurriera history.back (), así que tuve que ajustar mi transición en una función de tiempo de espera como esa.
$window.history.back();
setTimeout(function() {
$state.transitionTo("tab.jobs"); }, 100);
Esto solucionó mi problema.