テキストフィールドに入力してエンターを押すことでデータベース検索をトリガーできるアプリケーションを考えてみましょう。検索結果は直後に表示されるはずです。
これを実現するために、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()
にトリガーされます。どうしてこれなの?