我正在使用Ui路由器瀏覽Angularjs中的頁面,當我在第一個視圖中搜索一些結果並單擊該視圖中的鏈接時,它將會導航到第二個視圖,即Details視圖。現在,當我單擊一個將返回到第一個搜索頁面的href鏈接時,它將被刷新並且無法看到以前搜索到的結果。我已經使用history.go -1)在動態HTML頁面中的功能,但它不起作用。你能幫我解決我們如何在前面的視圖中保存加載的搜索結果。上一頁的搜索結果不應該刷新當點擊後退按鈕
這是我app.js
//模塊顯示供應商的詳細信息
angular.module('admApp', [ 'ui.router', 'ui.bootstrap' ]).
config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/providerSearch');
$stateProvider
.state('viewPrvdDtlPage', {
url : '/viewPrvdDtlPage/:prvdId',
templateUrl : 'viewPrvdDetail.html',
controller : 'ViewPrvdDetailCtrl'
}).state('providerSearch', {
url : '/providerSearch',
templateUrl : 'providerSearch.html',
controller : 'ProviderSearchCtrl'
});
} ]);
這是我services.js
angular.module('admApp').service("ViewPrvdDetService", [ '$http', '$q', function($http, $q) {
this.fetchPrvdDetail = function(prvdId) {
var defered = $q.defer();
var httpPromise = $http.post('viewPrvdDtl.htm', prvdId).success(function(data) {
var providerDetail = {};
providerDetail = data;
defered.resolve(providerDetail);
});
return defered.promise;
};
} ]);
angular.module('admApp').service("ProviderSearchService", [ '$http', '$q', function($http, $q) {
this.searchByCriteria = function(provider) {
var deferred = $q.defer();
var httpPromise = $http.post('find.htm', provider);
httpPromise.success(function(data) {
deferred.resolve(data);
});
return deferred.promise;
};
} ]);
這是我的控制器.js
angular.module('admApp').controller("ViewPrvdDetailCtrl", [ '$scope', '$http', '$stateParams', 'ViewPrvdDetService', function($scope, $http, $stateParams, ViewPrvdDetService) {
ViewPrvdDetService.fetchPrvdDetail($stateParams.prvdId).then(function(data) {
$scope.firstName = data.prvdFrstNm;
$scope.lastName = data.prvdLstNm;
$scope.taxIdentification = data.prvdTin;
$scope.fax = data.tPrvdDmgrphs[0].prvdFaxNum;
$scope.dbo = data.tPrvdDentistat[0].dntBirthDt;
$scope.stCode = data.tPrvdDmgrphs[0].prvdAdrStCd;
$scope.city = data.tPrvdDmgrphs[0].prvdAdrCityNm;
$scope.zip = data.tPrvdDmgrphs[0].prvdAdrXpndZipCd;
$scope.pdpStatus = data.tPrvdPpoNetwrks[0].pdpStatus;
$scope.specialty = data.tPrvdDentistat[0].spclSchNm;
// $scope.email = data.tPrvdDmgrphs[0].prvdEmailAdrTxt;
$scope.phone = data.prvdKeyTelNum;
$scope.npi = data.prvdNpiId;
$scope.providerKey = data.prvdRecId;
$scope.demograph = data.tPrvdDmgrphs;
$scope.dentistat = data.tPrvdDentistat;
$scope.ppoNet = data.tPrvdPpoNetwrks;
// this is for the specialty shown at top links
$scope.specialty = data.tPrvdDentistat[0].spclSchNm;
});
$scope.goBack = function() {
window.history.back;
};
} ]);
angular.module('admApp').controller(
"ProviderSearchCtrl",
[
'$scope',
'$http',
'$timeout',
'ProviderSearchService',
function($scope, $http, $timeout, ProviderSearchService) {
$scope.pageFunc = function(data) {
$scope.list = data;
$scope.currentPage = 1; // current page
$scope.entryLimit = 10; // max no of items to display in a page
$scope.filteredItems = $scope.list.length; // Initially for no filter
$scope.totalItems = $scope.list.length;
};
$scope.setPage = function(pageNo) {
if (pageNo <= ($scope.totalItems/$scope.entryLimit)) {
$scope.currentPage = pageNo;
}
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
$scope.searchValue = function() {
if ($scope.provider == undefined
|| (!$scope.provider.providerTin && !$scope.provider.providerFullLastName && !$scope.provider.providerFirstName && !$scope.provider.prvdAdrCityNm
&& !$scope.provider.prvdAdrStCd && !$scope.provider.prvdTelNum)) {
$scope.searchCriteria = 'specifySearch';
$scope.filteredItems = -1;
} else {
$scope.searchCriteria = 'noRecords';
ProviderSearchService.searchByCriteria($scope.provider).then(function(data) {
$scope.pageFunc(data);
});
}
};
$scope.formatTin = function(event) {
if (event.keyCode == 13) {
$scope.searchValue();
} else if ($scope.provider.providerTin != undefined) {
if (event.keyCode != 0 && event.keyCode != 8 && event.keyCode != 9 && (event.keyCode < 15 || event.keyCode > 21) && (event.keyCode < 33 || event.keyCode > 46)
&& (event.keyCode < 48 || event.keyCode > 57) && !(event.keyCode >= 96 && event.keyCode <= 105)) {
alert("Please enter only numeric value for Provider TIN");
$scope.provider.providerTin = $scope.provider.providerTin.replace(/\D/g, '');
}
}
};
$scope.formatLast = function(event) {
if (event.keyCode == 13) {
$scope.searchValue();
}
};
$scope.formatFirst = function(event) {
if (event.keyCode == 13) {
$scope.searchValue();
}
};
$scope.formatCity = function(event) {
if (event.keyCode == 13) {
$scope.searchValue();
}
};
$scope.formatPhone = function(event) {
if (event.keyCode == 13) {
$scope.searchValue();
} else {
if (event.keyCode != 0 && event.keyCode != 8 && event.keyCode != 9 && (event.keyCode < 15 || event.keyCode > 21) && (event.keyCode < 33 || event.keyCode > 46)
&& (event.keyCode < 48 || event.keyCode > 57) && !(event.keyCode >= 96 && event.keyCode <= 105)) {
alert("Please enter only numeric value for Phone Number");
$scope.provider.prvdTelNum = $scope.provider.prvdTelNum.replace(/\D/g, '');
}
if ($scope.provider.prvdTelNum.length >= 10) {
event.preventDefault();
$scope.provider.prvdTelNum = $scope.provider.prvdTelNum.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, '($1) $2-$3');
}
if (event.keyCode == 8) {
$scope.provider.prvdTelNum = $scope.provider.prvdTelNum.replace(/\D/g, '');
}
}
};
$scope.formatState = function(event) {
// alert("provider tin is " + $scope.provider.providerTin);
if (event.keyCode == 13) {
$scope.searchValue();
} else if (event.keyCode != 0 && event.keyCode != 8 && event.keyCode != 9 && (event.keyCode < 15 || event.keyCode > 21) && (event.keyCode < 33 || event.keyCode > 46)
&& (event.keyCode < 65 || event.keyCode > 90)) {
alert("Please enter valid state code");
$scope.provider.prvdAdrStCd = $scope.provider.prvdAdrStCd.replace(/[^A-Za-z]/g, '');
}
};
} ]);
這是我的index.html
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
.navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/filters.js"></script>
<title>Demo</title>
</head>
<!-- apply our angular app to our site -->
<body ng-app="admApp">
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div id="topnav">
<img src="img/logo.png" />
<!--ul class="menuOptions">
<li class="searchInput"><input id="search" type="search"></li>
<li class="addSearch"><a href="#"><strong></strong></a></li>
<li class="help"><a href="#"><span></span><label>Help</label></a></li>
<li class="alert"><a href="#"><span></span><label>Alert</label></a></li>
</ul-->
<div class="loginName"><a href="#"><label>Sr.Clinical Reviewer</label><span class="userDropdown"></span></a></div>
</div>
<ul class="nav-bar">
<li class="active"><a href="#">Provider</a></li>
<li><a href="#">Claims</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">Report</a></li>
<li><a href="#">Admin</a></li>
</ul>
<ul class="sub-nav-bar">
<li><a href="#">Directory</a></li>
<li><a href="#">Recommendations</a></li>
<li><a href="#" class="lastChild">WatchList</a></li>
</ul>
<div ui-view></div>
</body>
</html>
的可能重複[爲什麼我的$ scope屬性保持在正在重置我的AngularJS應用程序嗎?(http://stackoverflow.com/問題/ 13939244/why-my-scope-attributes-keep-reseting -in-my-angularjs-application) – ivarni 2014-09-03 04:59:02