1

テキストフィールドに入力してエンターを押すことでデータベース検索をトリガーできるアプリケーションを考えてみましょう。検索結果は直後に表示されるはずです。

これを実現するために、input 要素を作成し、ディレクティブ属性を指定しました。

<input search-shipment type="text">

// Directive

Shipment.directive('searchShipment',function(){
    return{
        restrict: 'A',
        link: function(scope,element){
            element.bind('keydown',function(e){
                if (e.which === 13){
                    scope.shipment.fetchShipment();
                }
            })
        }
    }
});

トリガーされた関数:

Shipment.prototype.fetchShipment = function(){

    $http.post('../sys/core/fetchShipment.php',{
        // some data to POST

    }).success(function(data){
          console.log(data);
       });
       console.log(finished);
};

これにより、いくつかの奇妙な動作が発生しました。関数がトリガーされ、「終了」がコンソールに記録されました。ただし、success()明らかに遅くトリガーされ、data別の入力を行うまでログに記録されませんでした。return

フォームを入力要素のラッパーとして使用し、ng-submit を使用して関数をトリガーすることで、この動作を回避できることがわかりました。

しかし、私はいくつかのことについて疑問に思います:

  • 最初のディレクティブ ベースのソリューションが正しく機能しなかったのはなぜですか?
  • フォームを使用せずに目標を達成するにはどうすればよいですか?
  • ワーキング フォーム ソリューションを使用しても、2 番目はデータのログ記録のconsole.log()にトリガーされます。どうしてこれなの?
4

1 に答える 1

2

ライブコードなしで、説明だけに基づいて確実に診断するのは難しいですが、ここで注目すべき2つのことです:

  • あなたの問題は$http、リクエストインターセプターが追加された AngularJS バージョン 1.1.x からの使用に関連している可能性があります。結果として、呼び出しはループ$http内から行う必要があります。呼び出しを次のよう$digestにラップしてみてください。scope.$apply

    link: function(scope,element){
            element.bind('keydown',function(e){
                if (e.which === 13){
                    scope.$apply(function(){
                      scope.shipment.fetchShipment();
                    });
    
                }
            })
        }
    
  • とにかく 1.1.x を使用している場合は、独自のディレクティブをロールアウトする代わりに、既存のngKeyDownディレクティブを使用できます。

于 2013-07-23T07:50:40.863 に答える