Angular.js'de history.back () nasıl uygulanır?

Geri düğmeli site başlığı olan direktifim var ve bir önceki sayfaya geri dönmek için tıklayın. Açısal olarak nasıl yaparım?

Denedim:

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

ve bu js direktifi:

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

ama hiçbir şey olmadı. Angular.js API $ yer hakkında baktı ama geri düğmesi hakkında bir şey bulamadık veya history.back().

Direktifinizde bir link fonksiyonu kullanmanız gerekir:

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

Bkz. JsFiddle .

Açısal yollar tarayıcının konumunu izler, bu nedenle basitçe bir window.history.back()şeyi tıkladığınızda kullanmak işe yarayacaktır.

HTML:

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

JS:

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

Uygulama denetleyicimde genellikle '$ back' adlı genel bir işlev oluştururum. Bu işlev genellikle gövde etiketine koyarım.

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

Sonra benim app herhangi bir yerde yapabilirim <a ng-click="$back()">Back</a>

(Daha test edilebilir olmasını istiyorsanız, $ window hizmetini kumandanıza enjekte edin ve kullanın $window.history.back()).

Denetleyicileri gereksiz $ penceresinden uzak tutmak için basit bir yönerge kullanın

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

Bunun gibi kullanın:

<button back>Back</button>

Bir başka güzel ve yeniden kullanılabilir bir çözüm gibi bir direktif yaratmaktır bu :

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

sonra sadece şu şekilde kullanın:

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

Yararlı olması durumunda ... "10 $ digest () yinelemelerine ulaşıldı. İptal ediliyor!" $ window.history.back () kullanılırken hata oluştu; IE9 ile (elbette diğer tarayıcılarda iyi çalışır).

Kullanarak işe aldım:

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

Veya sadece javaScript kod:

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

Sevmek:

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

Bir sözdizimi hatası oluştu. Bunu deneyin ve çalışması gerekir:

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

Açısal 4:

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

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

  constructor(private location: Location) { } 

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

Benim için sorunum, geriye dönüp başka bir duruma geçmem gerekti. Yani kullanarak$window.history.back() işe yaramadı çünkü bazı nedenlerden ötürü geçiş history.back () gerçekleşmeden önce gerçekleşti, bu yüzden geçişimi böyle bir zaman aşımı işlevine sarmak zorunda kaldım.

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

Bu benim sorunumu çözdü.

AngularJS2'de yeni bir yol buldum, belki de aynı şey ama bu yeni versiyonda:

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

(...)

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

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

İşlevimden sonra, uygulamamın angular2 / router'dan önceki sayfa usgin konumuna gittiğini görebiliyorum.

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