tutorial ejemplos descargar javascript angularjs

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.