Cara menerapkan history.back () di angular.js

Saya memiliki arahan yang merupakan tajuk situs dengan tombol kembali dan saya ingin di klik untuk kembali ke halaman sebelumnya. Bagaimana saya melakukannya dengan sudut pandang?

Saya telah mencoba:

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

dan ini adalah arahan js:

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

tetapi tidak ada yang terjadi. Saya melihat di API angular.js tentang $ location tetapi tidak menemukan apa pun tentang tombol kembali atau history.back().

Anda perlu menggunakan fungsi tautan dalam arahan Anda:

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

Lihat jsFiddle .

Rute sudut menonton lokasi peramban, jadi hanya dengan window.history.back()mengklik sesuatu akan berhasil.

HTML:

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

JS:

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

Saya biasanya membuat fungsi global yang disebut '$ kembali' pada pengontrol aplikasi saya, yang biasanya saya taruh di tag tubuh.

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

Lalu di mana saja di aplikasi saya yang bisa saya lakukan <a ng-click="$back()">Back</a>

(Jika Anda ingin itu lebih dapat diuji, masukkan layanan $ window ke controller Anda dan gunakan $window.history.back()).

Idealnya gunakan arahan sederhana untuk menjaga pengontrol bebas dari $ window yang berlebihan

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

Gunakan seperti ini:

<button back>Back</button>

Solusi bagus dan dapat digunakan kembali adalah dengan membuat arahan seperti ini :

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

maka gunakan saja seperti ini:

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

Jika berguna, saya mencapai "iterasi 10 $ digest () tercapai. Batalkan!" kesalahan saat menggunakan $ window.history.back (); dengan IE9 (berfungsi dengan baik di browser lain tentu saja).

Saya membuatnya bekerja dengan menggunakan:

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

Atau Anda cukup menggunakan javascript kode:

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

Suka:

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

Terjadi kesalahan sintaksis. Coba ini dan itu akan berhasil:

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

Sudut 4:

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

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

  constructor(private location: Location) { } 

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

Bagi saya, masalah saya adalah saya harus menavigasi kembali dan kemudian beralih ke negara lain. Jadi menggunakan $window.history.back()tidak berfungsi karena untuk beberapa alasan transisi terjadi sebelum history.back () terjadi sehingga saya harus membungkus transisi saya dalam fungsi batas waktu seperti itu.

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

Ini memperbaiki masalah saya.

Di AngularJS2 saya menemukan cara baru, mungkin hal yang sama tetapi dalam versi baru ini:

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

(...)

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

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

Setelah fungsi saya, saya dapat melihat bahwa aplikasi saya pergi ke halaman sebelumnya menggunakan lokasi dari angular2 / router.

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