Angular js preserving scroll position

Question

I'm using a directive to preserve scrolling position while going back from detail page to the home page. It works when I hit chrome's back button but when I use the "back" link in the detail page, the directive doesn't work. What should I change? Here's some code :

//Detail.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app="home">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Detay</title>
</head>
<body ng-controller="detay">
        <a class="back" href="/">Back</a>
        <div ng-view>
            <img class="bigpic" src="{{data.Image}}" />  <br />
            <div class="content" ng-bind-html="plainHtml"></div>
        </div>
        <a class="back" href="/" style="float:right">Back</a>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>


        <script src="~/Scripts/Detail.js"></script>
        <link href="~/Content/Site.css" rel="stylesheet" />
</body>
</html>

//Index.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>
<html ng-app="home">
<head>
    <meta charset="utf-8" />

    <title>Home</title>
</head>

<body ng-controller="anasayfa">
    <div ng-view auto-scroll>
    <div infinite-scroll="loadMore()" infinite-scroll-distance="0">
        <div class="home" ng-repeat="d in data">
            <div class="news">
            <p class="topic">{{d.Title}}</p>
            <a href="/detay{{d.Url}}"><img class="image" src="{{d.Image}}" /></a>
        </div>
    </div>
        </div>

 </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.2.2/ng-infinite-scroll.min.js"></script>
    <link href="~/Content/Site.css" rel="stylesheet" />

    <script src="/Scripts/Index.js"></script>
</body>
</html>

//Index.js

angular.module('home', ['infinite-scroll'])
 .directive('autoScroll', function ($document, $timeout, $location) {
     return {
         restrict: 'A',
         link: function (scope, element, attrs) {
             scope.okSaveScroll = true;

             scope.scrollPos = {};

             $document.bind('scroll', function () {
                 if (scope.okSaveScroll) {
                     scope.scrollPos[$location.path()] = $(window).scrollTop();
                 }
             });

             scope.scrollClear = function (path) {
                 scope.scrollPos[path] = 0;
             };

             scope.$on('$locationChangeSuccess', function (route) {
                 $timeout(function () {
                     $(window).scrollTop(scope.scrollPos[$location.path()] ? scope.scrollPos[$location.path()] : 0);
                     scope.okSaveScroll = true;
                 }, 0);
             });

             scope.$on('$locationChangeStart', function (event) {
                 scope.okSaveScroll = false;
             });
         }
     };
 })
.controller('anasayfa', ['$scope', '$http',
  function ($scope, $http, $location) {


      $scope.method = 'GET';

      var index = 0;
      $scope.loadCompleted = true;
      $scope.loadMore = function () {
          if (index > 0) {

              if ($scope.loadCompleted == false) return;

              $scope.loadCompleted = false;

              $http({ method: $scope.method, url: 'http://api.donanimhaber.com/api/v1/site/NewsSite?pageIndex=' + index + '&pageSize=15' }).
               then(function (response) {
                   $scope.status = response.status;

                   for (var i = 0; i < response.data.Data.length; i++) {
                       $scope.data.push(response.data.Data[i]);
                   }
                   index++;
                   $scope.loadCompleted = true;
               }, function (response) {
                   $scope.data = response.data || "Request failed";
                   $scope.status = response.status;
               });
          }
      };

      $scope.url = 'http://api.donanimhaber.com/api/v1/site/NewsSite?pageIndex=' + index + '&pageSize=15';
      $scope.code = null;
      $scope.response = null;

      $http({ method: $scope.method, url: $scope.url }).
        then(function (response) {
            $scope.status = response.status;
            $scope.data = response.data.Data;
            index++;
        }, function (response) {
            $scope.data = response.data || "Request failed";
            $scope.status = response.status;
        });


  }]);

//Detail.js

angular.module('home', ['ngSanitize'])
.controller('detay', ['$scope', '$http',
  function ($scope, $http) {
      $scope.method = 'GET';
      var urlSplit = window.location.pathname.replace("/detay/", "").split('-');
      var url = window.location.pathname.replace("/detay/", "").replace("-" + urlSplit[urlSplit.length - 1], "");
      $scope.url = 'http://api.donanimhaber.com/api/v1/site/NewsDetailSite/' + url + '?memberId=0&isGallery=0';
      $scope.data;
      $scope.plainHtml;

      $http({ method: $scope.method, url: $scope.url }).
        then(function (response) { 
            $scope.data = response.data.Data;
            $scope.plainHtml = $scope.data.Content;
        }, function (response) {
            $scope.data = response.data || "Request failed"; 
        });

  }]);

Answer 1

I solved it by changing the "Back" links from

 <a class="back" href="/">Back</a>

to

 <a class="back" href="javascript:void()" onclick="window.history.back(1)">Back</a>

Angular js preserving scroll position

Question

1 answers

solution1
0 2016-06-27 13:32:07

Angular js preserving scroll position

Question

1 answers

solution1 0 2016-06-27 13:32:07

solution1
0 2016-06-27 13:32:07