วิธีการใช้ 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 เกี่ยวกับ$ สถานที่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();
};

ฉันมักจะสร้างฟังก์ชั่นระดับโลกที่เรียกว่า '$ 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())

ใช้คำสั่งง่าย ๆ เพื่อให้ตัวควบคุมปราศจากหน้าต่าง $ ที่ซ้ำซ้อน

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

หรือคุณสามารถใช้ จาวาสคริปต์ รหัส:

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 / เราเตอร์

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