Question

在我的项目中，我使用angular $ routeProvider作为页面导航。为了回到我使用javascript.go（-1）。问题是当单击按钮后，它会再次加载并渲染所有数据。是否可以在javascript.go（-1）中保存前一个阶段？例如：

app.config(function ($routeProvider, localStorageServiceProvider) {

    $routeProvider
        .when('/api/lecturer/', {
            templateUrl: 'partials/dashboard.html',
            controller: 'dashboardController'
        })
        .when('/account/lecturer/project/', {
            templateUrl: 'part/lecturer_project.html',
            controller: 'projectController'
        }).otherwise({redirectTo: '/login'});})

HTML：

<li>
      <a onclick="javascript:history.go(-1);" style="cursor:pointer;" class="button">back
            <i class="entypo-left-dir right"></i>
      </a>
</li>

Answer 1

对于简单的实现，您需要记住上一页（仅一个），并将其存储在一些服务/工厂中，该服务/工厂将为控制器提供存储的值。这是一个使用ngRoute的简单演示：

＆＃13;

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: "main.html"
    })
    .when('/api/lecturer/', {
      templateUrl: 'partials/dashboard.html',
      controller: 'dashboardController'
    })
    .when('/account/lecturer/project/', {
      templateUrl: 'part/lecturer_project.html',
      controller: 'projectController'
    })
    .otherwise({
      redirectTo: '/'
    })
});
app.controller('dashboardController', function($scope, historyService) {
  $scope.back = historyService.get();
});
app.controller('projectController', function($scope, historyService) {
  $scope.back = historyService.get();
});

app.service('historyService', function() {
  /*  `this.back` can be an array instead, 
    	which will work as a stack, 
        pushing new previous pages
        and popping then when redirected back
  */
  this.back = "";
  this.get = function() {
    return this.back;
  }
  this.set = function(val) {
    this.back = val;
  }
  this.delete = function() {
    this.back = "";
  }
})

app.run(function($rootScope, historyService) {
  // `$locationChangeStart` event works better for this example
  $rootScope.$on("$locationChangeStart", function(event, next, prev) {
    //console.log(event); 
    //console.log(next); // current page
    //console.log(prev); // previous page
    historyService.set(prev); // store the previous page in a service
  });
});

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

  <a href="#!/api/lecturer/">lecturer</a>
  <a href="#!/account/lecturer/project/">project</a>
  <hr>
  <div ng-view></div>

  <script type="text/ng-template" id="main.html">
    <p>main.html</p>
  </script>
  <script type="text/ng-template" id="partials/dashboard.html">
    <p>partials/dashboard.html</p>
    <a ng-href="#!/">Main</a>
    <a ng-href="{{back}}">Go back</a>
  </script>
  <script type="text/ng-template" id="part/lecturer_project.html">
    <p>part/lecturer_project.html</p>
    <a ng-href="#!/">Main</a>
    <a ng-href="{{back}}">Go back</a>
  </script>

</body>
</html>

＆＃13;

如何在javascript.go（-1）中保存前一个阶段

1 个答案: