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未被记录，直到我做了另一个输入，该输入必须与返回

不同

现在我已经想通过使用表单作为输入元素的包装器然后使用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指令，而不是自己推出。

AngularJS：推荐通过enter触发函数的方法

1 个答案: