javascript - AngularJS:通过回车触发功能的推荐方式

Question

考虑一个应用程序，在该应用程序中，可以通过向文本字段输入内容然后按回车键来触发数据库搜索。搜索结果应在之后立即显示。

为此，我创建了一个输入元素并为其指定了一个指令属性:

<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 来触发我的函数。

不过，我想知道一些事情:

• 为什么我的第一个基于指令的解决方案无法正常工作？
• 如何在不使用表格的情况下实现我的目标？
• 即使使用工作表单解决方案，第二个 console.log() 也会在数据记录之前被触发。这是为什么？

Answer 1

如果没有实时代码，仅根据描述很难确定诊断，但这里有两点需要注意:

• 您的问题可能与使用 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指令而不是推出你自己的指令。