2014-09-02 62 views
1

我正在使用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> 
+0

的可能重复[为什么我的$ scope属性保持在正在重置我的AngularJS应用程序吗?(http://stackoverflow.com/问题/ 13939244/why-my-scope-attributes-keep-reseting -in-my-angularjs-application) – ivarni 2014-09-03 04:59:02

回答

1

它不会以这种方式工作。

历史上的'返回'只是路径路径的变化:新模板(搜索)和新控制器。它没有保存在'记忆'中的信息。

如果你想'记住'用户选择你必须编写代码(例如,保存在Cookie中或存储在浏览器中的数据等)。


编辑14年9月3日


在控制器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(); 
} 

问候

+0

你能否详细解释 – 2014-09-02 15:25:04

+0

Thanq @ lattanzio,但上面的想法不起作用 – 2014-09-04 06:19:35

+0

那种错误?错字,零点exp,逻辑......? :) – Lattanzio 2014-09-04 07:46:58