Jak zaimplementować history.back () w angular.js

Mam dyrektywę, która jest nagłówkiem strony z przyciskiem Wstecz i chcę po kliknięciu wrócić do poprzedniej strony. Jak to zrobić w sposób kątowy?

Próbowałem:

<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>

a to jest dyrektywa js:

myApp.directive('siteHeader', function () {
    return {
        restrict: 'E',
        templateUrl: 'partials/siteHeader.html',
        scope: {
            title: '@title',
            icons: '@icons'
        }
    };
});

ale nic się nie dzieje. Zajrzałem do interfejsu API angular.js o $ location, ale nie znalazłem nic o przycisku Wstecz lub history.back().

Musisz użyć funkcji link w swojej dyrektywie:

link: function(scope, element, attrs) {
     element.on('click', function() {
         $window.history.back();
     });
 }

Zobacz jsFiddle .

Kątowe trasy śledzą lokalizację przeglądarki, więc po prostu window.history.back()kliknięcie czegoś by działało.

HTML:

<div class="nav-header" ng-click="doTheBack()">Reverse!</div>

JS:

$scope.doTheBack = function() {
  window.history.back();
};

Zwykle tworzę funkcję globalną o nazwie „$ back” na kontrolerze aplikacji, którą zwykle umieszczam na tagu body.

angular.module('myApp').controller('AppCtrl', ['$scope', function($scope) {
  $scope.$back = function() { 
    window.history.back();
  };
}]);

W takim razie gdziekolwiek w mojej aplikacji mogę po prostu zrobić <a ng-click="$back()">Back</a>

(Jeśli chcesz, aby był bardziej testowalny, wstrzyknij usługę $ window do kontrolera i użyj $window.history.back()).

Idealnie użyj prostej dyrektywy, aby utrzymać kontrolery wolne od zbędnego okna $

app.directive('back', ['$window', function($window) {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                elem.bind('click', function () {
                    $window.history.back();
                });
            }
        };
    }]);

Użyj w ten sposób:

<button back>Back</button>

Kolejną miłą i wielokrotnego użytku rozwiązaniem jest utworzenie dyrektywę jak to :

app.directive( 'backButton', function() {
    return {
        restrict: 'A',
        link: function( scope, element, attrs ) {
            element.on( 'click', function () {
                history.back();
                scope.$apply();
            } );
        }
    };
} );

użyj tego w następujący sposób:

<a href back-button>back</a>

W przypadku, gdy jest to przydatne ... Uderzyłem w „Osiągnięto iteracje 10 $ digest (). Przerwanie!” błąd podczas korzystania z $ window.history.back (); z IE9 (działa oczywiście w innych przeglądarkach).

Mam go do pracy przy użyciu:

setTimeout(function() {
  $window.history.back();
},100);

Lub możesz po prostu użyć javascript kod :

onClick="javascript:history.go(-1);"

Lubić:

<a class="back" ng-class="icons">
   <img src="../media/icons/right_circular.png" onClick="javascript:history.go(-1);" />
</a>

Wystąpił błąd składniowy. Spróbuj tego i powinno działać:

directives.directive('backButton', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function () {
                history.back();
                scope.$apply();
            });
        }
    }
});

Kątowy 4:

/* typescript */
import { Location } from '@angular/common';
// ...

@Component({
  // ...
})
export class MyComponent {

  constructor(private location: Location) { } 

  goBack() {
    this.location.back(); // go back to previous location
  }
}

Dla mnie moim problemem było to, że musiałem nawigować wstecz, a następnie przejść do innego stanu. Tak więc używanie $window.history.back()nie działało, ponieważ z jakiegoś powodu przejście miało miejsce przed historią.back (), więc musiałem zawinąć swoje przejście w funkcję limitu czasu.

$window.history.back();
setTimeout(function() {
  $state.transitionTo("tab.jobs"); }, 100);

To naprawiło mój problem.

W AngularJS2 znalazłem nowy sposób, może to jest to samo, ale w tej nowej wersji:

import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router'; 

(...)

constructor(private _router: Router, private _location: Location) {}

onSubmit() {
    (...)
    self._location.back();
}

Po mojej funkcji widzę, że moja aplikacja przechodzi do poprzedniej strony z lokalizacją usgin z angular2 / routera.

https://angular.io/docs/ts/latest/api/common/index/Location-class.html