2014-09-02 37 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