考虑一个应用程序,在该应用程序中,可以通过输入文本字段,然后按enter键来触发数据库搜索。搜索结果应立即显示。
为了实现这一点,我创建了一个输入元素,并赋予它一个指令属性:
<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
直到我做出另一个输入才被记录,该输入必须与返回不同
现在我已经发现,我可以通过使用表单作为输入元素的包装器,然后使用ng-submit来触发我的函数来避免这种行为。
然而,我想知道一些事情:
- 为什么我的第一个基于指令的解决方案不能正常工作
- 如果不使用表单,我如何实现目标
- 即使使用工作表单解决方案,第二个
console.log()
也会在记录数据之前触发。为什么会这样
仅根据描述很难确定诊断,没有实时代码,但有两件事需要注意:
-
您的问题可能与使用AngularJS 1.1.x版本中添加了请求拦截器的
$http
有关。因此,$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指令,而不是推出自己的指令。