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

그러나 아무 일도 일어나지 않습니다. angular.js API에서 $ location 에 대해 살펴 보았지만 뒤로 버튼 또는에 대해서는 아무것도 찾지 못했습니다 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'이라는 전역 함수를 작성합니다. 일반적으로 body 태그를 사용합니다.

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

또는 간단히 사용할 수 있습니다 자바 스크립트 코드 :

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 location으로 이동하고 있음을 알 수 있습니다.

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