我正在使用指令在从详细信息页面返回主页时保留滚动位置。当我按下chrome的后退按钮但当我在详细信息页面中使用“后退”链接时,该指令不起作用。我应该改变什么? 这是一些代码:
// 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";
});
}]);
答案 0 :(得分:0)
我通过改变&#34; Back&#34;解决了这个问题。来自
的链接 <a class="back" href="/">Back</a>
到
<a class="back" href="javascript:void()" onclick="window.history.back(1)">Back</a>