Cách triển khai history.back () trong angular.js

Tôi có chỉ thị là tiêu đề trang web với nút quay lại và tôi muốn nhấp để quay lại trang trước. Làm thế nào để tôi làm điều đó theo cách góc cạnh?

Tôi đã thử:

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

và đây là chỉ thị js:

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

Nhưng không có gì xảy ra. Tôi đã tìm trong API angular.js về vị trí $ nhưng không tìm thấy gì về nút quay lại hoặc history.back().

Bạn cần sử dụng chức năng liên kết trong chỉ thị của mình:

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

Xem jsFiddle .

Các tuyến đường xem vị trí của trình duyệt, vì vậy chỉ cần sử dụng window.history.back()nhấp vào một cái gì đó sẽ hoạt động.

HTML:

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

JS:

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

Tôi thường tạo một hàm toàn cầu có tên '$ back' trên bộ điều khiển ứng dụng của mình, mà tôi thường đặt trên thẻ body.

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

Sau đó, bất cứ nơi nào trong ứng dụng của tôi, tôi chỉ có thể làm <a ng-click="$back()">Back</a>

(Nếu bạn muốn nó dễ kiểm tra hơn, hãy đưa dịch vụ $ window vào bộ điều khiển của bạn và sử dụng $window.history.back()).

Tốt nhất là sử dụng một lệnh đơn giản để giữ cho các bộ điều khiển không có cửa sổ $ dự phòng

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

Sử dụng như thế này:

<button back>Back</button>

Một giải pháp hay và có thể tái sử dụng khác là tạo một lệnh như thế này :

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

sau đó chỉ cần sử dụng nó như thế này:

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

Trong trường hợp nó hữu ích ... Tôi đã đạt đến "lần lặp 10 $ digest () đạt được. Hủy bỏ!" lỗi khi sử dụng $ window.history.back (); với IE9 (tất nhiên hoạt động tốt trong các trình duyệt khác).

Tôi đã làm cho nó hoạt động bằng cách sử dụng:

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

Hoặc đơn giản là bạn có thể sử dụng javascript mã:

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

Giống:

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

Có một lỗi cú pháp. Hãy thử điều này và nó sẽ hoạt động:

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

Góc 4:

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

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

  constructor(private location: Location) { } 

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

Đối với tôi, vấn đề của tôi là tôi cần điều hướng trở lại và sau đó chuyển sang trạng thái khác. Vì vậy, việc sử dụng $window.history.back()không hoạt động vì một số lý do quá trình chuyển đổi đã xảy ra trước history.back () xảy ra nên tôi phải kết thúc quá trình chuyển đổi của mình trong một hàm thời gian chờ như vậy.

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

Điều này đã khắc phục vấn đề của tôi.

Trong AngularJS2 tôi đã tìm thấy một cách mới, có thể chỉ là điều tương tự nhưng trong phiên bản mới này:

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

(...)

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

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

Sau chức năng của tôi, tôi có thể thấy rằng ứng dụng của tôi sẽ chuyển đến vị trí sử dụng trang trước đó từ angular2 / bộ định tuyến.

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