0
詳細ページからホームページに戻るときに、スクロール位置を保持するためにディレクティブを使用しています。クロムの戻るボタンを押すと機能しますが、詳細ページで「戻る」リンクを使用すると、ディレクティブは機能しません。私は何を変えるべきですか？スクロール位置を保持する角度js
//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";
});
}]);
に
から「戻る」のリンクを変更することによってそれを解決しましたあなたはもう一度帰りたいと思っています。 –
私は今試してIndex.jsに追加しましたが、動作しませんでした。私は間違っていましたか？ – hbc