Question

我在执行后退和前进按钮期间在AngularJS中开发我的网站时遇到了问题。

// app.js
var app = angular.module('myApp', [])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/Page1', {
          templateUrl: 'partial/view1.html', controller: Ctrl1})
      .when('/Page2', {
          templateUrl: 'partial/view2.html', controller: Ctrl2})
      .otherwise({
          redirectTo: '/Page1'});
}]);

当我从第1页导航到第2页时，即使使用以下指令，我也无法返回：

// app.js
app.directive('backButton', function(){
    return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                  element.bind('click', goBack);

                  function goBack() {
                     history.back();
                     scope.$apply();
                  }
            }
    }
});

-

<!-- view1.html / view2.html -->
<i class="fa fa-chevron-left" back-button></i>

然而，当我回到同一个视图时它会起作用。有解决方案吗？

由于

编辑： $ window也没有帮助，因为我已经尝试改变我的指令：

// app.js
app.directive('backButton', ['$window', function($window) {
    return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                  element.bind('click', goBack);

                  function goBack() {
                     $window.history.back();
                     scope.$apply();
                  }
            }
    }
});

并得到了相同的行为。

Answer 1

正如Davin在评论中所说，你必须使用$window.history.back();服务中的$window。不要忘记将其声明为指令的依赖

directive('directiveName', ['$window', function($window) {
    ...
  }])

编辑：没有拼写错误的完整工作指令

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

控制器之间的后退和前进

1 个答案: