0

私は現在、Webフロントエンドを備えたデータベースに取り組んでいます。このプロジェクトの以前のバージョンでjQueryを使用していたので、次のような「インスタント検索」機能にAngularJSを使用するようになりました。

function SearchCtrl($scope, $http) {
    $scope.search = function() {  
    $scope.result = null;

    $http({method: 'GET', url: 'api/items/search/' + $scope.keywords }).
        success(function(data, status, headers, config) {
            $scope.result = data;
        }).
        error(function(data, status, headers, config) {
            $scope.status = status;
        });     
    };
}

...
<div id="searchControl" ng-controller="SearchCtrl">
    <form method="get" action="" class="searchForm">
        <input type="text" id="search" name="search" ng-model="keywords" ng-change="search()"/>
        <input type="submit" value="Search" />
    </form>
    <div ng-model="result">
        <a href="javascript:void(0)" ng-repeat="items in result.items" >
            <div class="card">
                <span ng-show="items.id"><b>Item ID: </b>{{items.id}}<br></span>
                <span ng-show="items.part_id"><b>Part ID: </b>{{items.part_id}}<br></span>
                <span ng-show="items.description"><b>Description: </b>{{items.description}}<br></span>
                <span ng-show="items.manufacturer"><b>Manufacturer: </b>{{items.manufacturer}}<br></span>
                <span ng-show="items.product_range"><b>Range: </b>{{items.product_range}}<br></span>
                <span ng-show="items.borrower"><b>Borrower: </b>{{items.borrower}}<br></span>
                <span ng-show="items.end_date"><b>End Date: </b>{{items.end_date}}<br></span>
            </div>
        </a>
    </div>
</div>
...

これはうまく機能しますが、1つの問題があります。「ng-change」で検索関数を呼び出しているため、検索語を入力するときに非常に時間がかかり、ブラウザがクラッシュすることがあります。古いバージョン（jQueryを使用）では、フラグを使用してgetリクエストがすでに実行されているかどうかをテストし、実行されている場合は、新しいリクエストを開始する前に中止しました。getリクエストを中止するためのAngularJSのドキュメントを見てきましたが、それでも賢明ではありません。誰かがこれまたは別の修正を達成する方法について何かアドバイスを持っているなら、私はそれを大いに感謝します。

ありがとう。

4

2 に答える 2

2

getリクエストが送信されると、送信されます。ちなみに、Angularにネイティブなhttpリクエストの結果の処理を中止する方法はまだありません。現在「OPEN」とラベル付けされている機能リクエストは次のとおりです：https ：//github.com/angular/angular.js/issues/1159

そうは言っても、次のように自分で応答の処理を中止することができます。

var currentKey= 0;

$scope.test = function (){
   $http({ method: 'GET', url: 'test.json', key: ++currentKey })
      .success(function(data, status, headers, config) {
         if(config.key == currentKey) {
           //You're now inside your most recent call.
           $scope.foo = data;
         }
      });
};

その反面、変更時のイベントに何らかのタイムアウトを実装して、「おしゃべり」になりすぎないようにすることをお勧めします。

于 2013-02-07T13:06:42.103 に答える
0

あなたの場合、angularjsのデバウンス/スロットルモデルの更新が役立ちます：http：//jsfiddle.net/lgersman/vPsGb/3/

この例のディレクティブは、変更イベントを抑制して、より少ないajaxリクエストが実行されるようにします。

次のようなjsfiddleコードでディレクティブを使用する以外に何もする必要はありません。

<input 
    type="text" 
    id="search" 
    name="search" 
    ng-model="keywords" 
    ng-change="search()"
    ng-ampere-debounce
/>

基本的には、 http：//benalman.com/projects/jquery-throttle-debounce-plugin/を利用した「ng-ampere-debounce」という名前の単一の角度ディレクティブで構成される小さなコードであり、任意のdom要素にアタッチできます。ディレクティブは、接続されているイベントハンドラーを並べ替えて、イベントをいつスロットルするかを制御できるようにします。

スロットル/デバウンスに使用できます*モデルの角度の更新*角度のイベントハンドラーng-[イベント]*jqueryイベントハンドラー

ご覧ください：http：//jsfiddle.net/lgersman/vPsGb/3/

ディレクティブは、Orangevolt Ampereフレームワーク（https://github.com/lgersman/jquery.orangevolt-ampere）の一部になります。

于 2013-08-15T13:18:00.390 に答える