在訪問帶有列表的頁面，一般會點擊列表中某行記錄，訪問其詳情頁面，點擊返回後回到列表頁面，若不進行定位，那麼用戶需要重新滾動直到找到剛纔點擊的行記錄，體驗不好。那麼返回時定位可以將剛纔點擊的行記錄直接展示在當前的可視區域內。
ionic中列表定位可以通過$ionicScrollDelegate來實現，定位方式：
1、通過錨點定位
2、通過滾動高度定位
兩種方式的實現都需要考慮列表是否渲染完成的問題，方式1通過元素id，方式2通過滾動高度，因此列表未渲染完成會導致定位的元素id不存在或者滾動的高度不夠的問題而使定位失效。那麼監聽列表渲染是否完成可以通過自定以指令來做，如下：
app.directive('onWatchRepeatFinished', function ($timeout) {
return {
restrict: 'A',
link: function(scope,element,attr) {
if (scope.$last === true) {
var key=attr.onWatchRepeatFinished;
if(key!=null) {
key=key.replace(/(^\s*)|(\s*$)/g, "");
if(key==="") {
key="ngRepeatFinished";
}
} else {
key="ngRepeatFinished";
}
$timeout(function() {
scope.$emit(key);
});
}
}
};
});
***********************定位方式1：通過錨點定位**************************
////////////////////頁面/////////////////////
<ion-content delegate-handle="businessList-handle">
<div class="list">
<div class="item"
ng-repeat="info in infos"
ng-click="gotoInfoDetail($index)"
id="info-anchor-{{$index}}"
on-watch-repeat-finished="businessList">
{{info.date}}
</div>
</div>
</ion-content>
////////////////////controller/////////////////////
$scope.gotoInfoDetail=function(index) {
$window.localStorage['info-anchor']='info-anchor-'+index;
//跳轉到詳情
$scope.gotoView.gotoNewHospDetailPage();
}
$scope.$on('businessList', function (e) {
var anchorid=$window.localStorage['info-anchor'];
if(!$Element.isEmpty(anchorid)) {
$location.hash(anchorid);
$ionicScrollDelegate.$getByHandle('businessList-handle').anchorScroll();
$window.localStorage['info-scroll']=null;
}
});
注：該方式會在url上添加錨點（#id），在微信公衆號平臺頁面返回時需要點擊2次才能返回到前一頁面！
***********************定位方式2：通過滾動高度定位**************************
////////////////////頁面/////////////////////
<ion-content delegate-handle="businessList-handle">
<div class="list">
<div class="item"
ng-repeat="info in infos"
ng-click="gotoInfoDetail()"
on-watch-repeat-finished="businessList">
{{info.date}}
</div>
</div>
</ion-content>
////////////////////controller/////////////////////
$scope.gotoInfoDetail=function() {
var handle=$ionicScrollDelegate.$getByHandle('businessList-handle');
if(handle) {
$window.localStorage['info-scroll']=handle.getScrollPosition().top;
}
$window.localStorage['info-scroll']=0;
//跳轉到詳情
$scope.gotoView.gotoNewHospDetailPage();
}
$scope.$on('businessList', function (e) {
var scrolltop=$window.localStorage['info-scroll'];
if(!$Element.isEmpty(scrolltop)) {
$ionicScrollDelegate.$getByHandle('businessList-handle').scrollTo(0, parseInt(scrolltop));
$window.localStorage['info-scroll']=null;
}
});