2016-05-18 27 views
1

私が取り組んでいるアプリケーションで高度な検索を実装しています。この検索で​​は、ブラウザーの戻るボタンと次のボタンを使って検索を行います。これを実現するために

私は私の$ routeProviderにこれを追加しました:私のSearchControllerで

.when('/search', { 
    templateUrl: 'Scripts/App/Views/Search.html', 
    controller: 'SearchController', 
    reloadOnSearch: false 
}) 

を私はちょうど私のURLにいくつかのクエリ文字列パラメータを追加します$スコープに検索機能を持っている:

$scope.advancedSearch = function(){ 
    $location.search("page", $scope.currentPage); 
    $location.search("groupingField", $scope.groupingField); 
    $location.search("topgroup", angular.toJson($scope.filter)); 
} 

$ routeUpdateを聞いて、クエリ文字列パラメータを取得し、これらのパラメータで検索を実行します。

$scope.$on('$routeUpdate', function() { 
    var qs = $location.search(); 
    var topGroup = qs["topgroup"]; 
    $scope.filter = angular.fromJson(topGroup); 
    $scope.groupingField = qs["groupingField"]; 
    $scope.currentPage = qs["page"]; 
    performSearch(); 
}); 

私の実際の検索方法では、エラーのフォームをチェックします。メッセージが表示されている場合は、検索を実行します(APIコールを実行します)。

var performSearch = function() { 
    if ($scope.searchForm.$invalid) { 
     $scope.message = "Please fix the errors before you search."; 
    } else { 
     //get search results from database and put them on $scope. 
    } 
} 

このコードでは、正しい結果を検索して取得できます。私が新しい検索をすると正しい結果が得られ、ブラウザの戻ると次のボタンを使うことができます。

私は検索を行い、私のフォームは無効ですが、メッセージが表示されますが、無効な検索の後に戻ると、 "performSearch"メソッドが呼び出された後にフォームの$ invalidが更新されます。これにより、「検索する前にエラーを修正してください。」というメッセージが表示されます。フォームが$ validであっても表示するメッセージ。

この後、次のボタンをクリックすると、フォームは$ validとなっていますが、querystringのパラメータが$ invalidであるため、さらに問題が発生します。これも、performSearchが呼び出された後にのみ更新されます。遅くなる。

私の問題を理解するのは難しいかもしれませんが、不明な点がある場合は質問してください。

+1

データベースにクエリするのに$ httpサービスを使用していますか?これは、スコープダイジェストサイクルの場合で、発火するのではなく、有効なリスナーを起動します。 – Kazimieras

+0

はい私は$ httpサービスを使用しています。私は$ scopeを呼び出すかどうかテストします。performSearchメソッドの前に$ apply()を呼び出します –

+0

"$ digest already in progress"が得られるので$ scope。$ apply()を使うことはできません。ダイジェストサイクルがトリガーされていますが、。$ invalidという形式はlateに変更されます。私はsearchForm。$ invalidを監視し、アプリケーションがすでにリクエストを送信したときに変更します。 –

答えて

0

答えを見つけました! $ routeupdateで、フォームのプロパティを更新して更新するためにダイジェストサイクルが待っていました。これは時間のない$ timeoutで行うことができます。

$scope.$on('$routeUpdate', function() { 
    var qs = $location.search(); 
    var topGroup = qs["topgroup"]; 
    $scope.filter = angular.fromJson(topGroup); 
    $scope.groupingField = qs["groupingField"]; 
    $scope.currentPage = qs["page"]; 
    $timeout(function() { 
     performSearch(); 
    }); 
});