Как сохранить предыдущий этап в javascript.go (-1) - PullRequest
Новая
       27

Как сохранить предыдущий этап в javascript.go (-1)

0 голосов
/ 21 мая 2018

В моем проекте я использую угловой $ 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>

1 Ответ

0 голосов
/ 21 мая 2018

Для простой реализации вам нужно запомнить предыдущую страницу (только одну) и сохранить ее в какой-либо службе / фабрике, которая предоставит сохраненное значение вашим контроллерам.Вот простая демонстрация с ngRoute: 

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
  });
});
<!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>
...