Как реализовать history.back() в angular.js

У меня есть директива, которая представляет собой заголовок сайта с кнопкой "Назад", и я хочу, чтобы щелкнуть, чтобы вернуться к предыдущей странице. Как это сделать с помощью angular?

Я пробовал:

<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().

Ответы

Ответ 1

Вам нужно использовать функцию ссылки в вашей директиве:

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

См. jsFiddle.

Ответ 2

Маршруты

Angular отслеживают расположение браузера, поэтому просто используя window.history.back() при нажатии что-то будет работать.

HTML:

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

JS:

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

Обычно я создаю глобальную функцию с именем "$ 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()).

Ответ 3

В идеале используйте простую директиву, чтобы сохранить контроллеры без избыточного окна $

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>

Ответ 4

Другим приятным и многоразовым решением является создание такой директивы, как this:

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>

Ответ 5

В случае, если это полезно... Я ударил по "10 $digest() итерациям, достигнутым. Отмена!" ошибка при использовании $window.history.back(); с IE9 (отлично работает в других браузерах, конечно).

Я получил его для работы, используя:

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

Ответ 6

ИЛИ вы можете просто использовать 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>

Ответ 7

Произошла синтаксическая ошибка. Попробуйте это, и он должен работать:

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

Ответ 8

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

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

Это исправило мою проблему.

Ответ 9

В 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

Ответ 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
  }
}