AngularJS:推荐通过回车触发函数的方式

AngularJS: recommended way of triggering a function via enter

本文关键字：函数 方式 回车 AngularJS      更新时间：2023-09-26

考虑一个应用程序，在该应用程序中，可以通过输入文本字段，然后按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指令，而不是推出自己的指令。

相关文章：