如何在angular.js中实现history.back()

2020/10/18 20:41 · javascript ·  · 0评论

我有指令,它是带有后退按钮的网站标题,我想单击可返回到上一页。我如何以有角度的方式做到这一点?

我努力了:

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

但什么也没发生。我查看了有关$ location的angular.js API,但未找到有关后退按钮或的任何信息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位置。

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

本文地址:http://javascript.askforanswer.com/ruhezaiangular-jszhongshixianhistory-back.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!