angular.js에 history.back()을 구현하는 방법

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>

명령어는 다음과 같습니다.

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

아무 일도 일어나지 않아요angular.js API에서 $location에 대해 알아봤지만 back 버튼이나 button에 대해서는 아무것도 찾을 수 없었습니다.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()).

컨트롤러에 중복된 $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를 사용할 때 "Aborting!history.back(); IE9(물론 다른 브라우저에서는 정상적으로 동작합니다).

다음을 사용하여 작동시켰습니다.

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

또는 javascript 코드를 사용할 수도 있습니다.

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

이것으로 문제가 해결되었습니다.

각진 상태JS2 새로운 방법을 찾았습니다.아마도 같은 것일지도 모르지만, 이 새로운 버전에서는:

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

(...)

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

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

기능 후, 어플리케이션이 angular2/router에서 이전 페이지 usgin 위치로 이동하는 것을 알 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/14070285/how-to-implement-history-back-in-angular-js