Як реалізувати history.back () в angular.js

У мене є директива - це заголовок сайту з кнопкою "назад", і я хочу, щоб натиснути кнопку, щоб повернутися до попередньої сторінки. Як це зробити кутовим способом?

Я намагався:

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

і це директива js:

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

але нічого не відбувається. Я переглянув API angular.js про $ location, але не знайшов нічого про кнопку назад або history.back().

Вам потрібно використовувати функцію посилання у своїй директиві:

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

Дивіться jsFiddle .

Кутові маршрути відстежують розташування браузера, тому просто window.history.back()натискання на щось щось спрацює.

HTML:

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

JS:

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

Зазвичай я створюю на своєму контролері програми глобальну функцію під назвою "$ назад", яку я зазвичай наношу на тег body.

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

Тоді в будь-якому місці свого додатка я просто можу це зробити <a ng-click="$back()">Back</a>

(Якщо ви хочете, щоб він був більш перевіреним, введіть службу $ window у свій контролер і використовуйте $window.history.back()).

В ідеалі використовуйте просту директиву, щоб захистити контролери від зайвих $ window

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

Використовуйте так:

<button back>Back</button>

Ще одна приємна і багаторазові рішення створити директиву , як це :

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

тоді просто використовуйте його так:

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

У випадку, якщо це корисно ... Я потрапляв на "досягнуті ітерації 10 $ (). Аборт!" помилка при використанні $ window.history.back (); з IE9 (добре працює в інших браузерах, звичайно).

Я змусив його працювати, використовуючи:

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

Або ви можете просто використовувати javascript код:

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

Подібно до:

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

Виникла помилка синтаксису. Спробуйте це, і це має працювати:

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

Кутовий 4:

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

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

  constructor(private location: Location) { } 

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

Для мене моєю проблемою було те, що мені потрібно було перейти назад, а потім перейти до іншого стану. Тому використання $window.history.back()не працювало, оскільки чомусь перехід відбувся до того, як відбувся history.back (), тому мені довелося перевести перехід у функцію тайм-аута.

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

Це вирішило мою проблему.

У AngularJS2 я знайшов новий спосіб, можливо, саме те саме, але в цій новій версії:

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

(...)

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

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

Після виконання моєї функції я бачу, що моя програма переходить на попередню сторінку Usgin від angular2 / router.

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