angular.jsにhistory.back（）を実装する方法

戻るボタン付きのサイトヘッダーであるディレクティブがあり、クリックすると前のページに戻ります。どうすれば角度のある方法でそれを行うのですか？

私が試してみました：

<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'
        }
    };
});

しかし、何も起こりません。$ locationについてangular.js APIを調べましたが、戻るボタンやについては何も見つかりませんでしたhistory.back()。

ディレクティブでリンク関数を使用する必要があります：

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

jsFiddleを参照してください。

Angularルートはブラウザの位置を監視するので、単に window.history.back()何かをクリックする機能します。

HTML：

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

JS：

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

私は通常、アプリのコントローラーで '$ back'というグローバル関数を作成します。これは通常、ボディタグに配置します。

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回の$ digest（）の反復に達しました。中止します！」$ 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();
}

私の関数の後、私のアプリケーションがangular2 / routerから前のページusginの場所に移動していることがわかります。

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