1

考虑一个应用程序，其中可以通过向文本字段提供输入，然后按 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直到我进行另一个必须不同于其他输入的输入才被记录return

现在我发现我可以通过使用表单作为输入元素的包装器来避免这种行为，然后使用 ng-submit 来触发我的函数。

但是，我想知道一些事情：

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

1 回答 1

2

仅根据描述很难确定诊断，没有实时代码，但这里有两件事要注意：

  • 您的问题可能与使用$http添加了请求拦截器的 AngularJS 版本 1.1.x 相关联。因此$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指令而不是推出自己的指令。

于 2013-07-23T07:50:40.863 回答