Question

使用Ui-router导航Angularjs中的页面，当我在第一个视图中搜索某些结果并单击该视图中的链接时，它将导航到第二个视图，即Details视图。现在，当我点击一个href链接将返回到第一个搜索页面，它正在刷新并且无法看到之前搜索到的结果。我在动态HTML页面中使用了history.go（-1）函数但是它没有工作。可以你帮我解释我们如何在上一个视图中保存加载的搜索结果。

这是我的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;
    };
} ]);

这是我的controllers.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>

Answer 1

它并没有以这种方式运作。

＆＃39;返回＆＃39;在历史中只是路径路径的变化：新模板（搜索）和新控制器。它没有保存在＆＃39;记忆中的信息。

如果你想要记住＆＃39;用户选择你必须编写代码（例如将其保存在cookie中或在浏览器中存储数据等）。

编辑9/3/14

在控制器 ProviderSearchCtrl 中定义函数 $ scope.searchValue 时，您可以将存储在 提供商数据

某处可能是例如：

ngCookies

在$ rootScope中存储信息（请注意$ scoope，如建议的那样，仅存在于当前控件中）

后端的其他服务，用于持久保存用户首选项

html5存储数据（就像浏览器上的sqlite）

...

选择取决于您的需求。

执行 ProviderSearchCtrl 时，您必须检查是否存储了数据。如果您不想在服务器中再次执行相同的搜索调用，您可以在$ rootScope中保存结果并显示它们。只有当你必须减轻服务器负载时，我才建议这样做。

未经测试，但有想法......

//... $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 { // you have to define before $cookies.mySearchFormData if ($cookies.mySearchFormData.provider !== $scope.provider) { $cookies.mySearchFormData.provider = $scope.provider; } $scope.searchCriteria = 'noRecords'; ProviderSearchService.searchByCriteria($scope.provider).then(function(data) { $scope.pageFunc(data); }); } }; //... if ($cookies.mySearchFormData !== undefined && $cookies.mySearchFormData.provider !== undefined) { // First view load, re-execute the search $scope.provider = $cookies.mySearchFormData.provider; $scope.searchValue(); }

此致

单击后退按钮时，不应刷新上一页的搜索结果

1 个答案: