发送KEYDOWN到角指令与jQuery .trigger（） [英] Sending keydown to Angular directive with jQuery .trigger()

问题描述

我创建了一个编辑指令在一家豪华的框架来包装一个HTML输入。

I've created an edit directive to wrap an html input in a fancy frame.

现在我创建一个单元测试来检查，一旦我在输入类型的表单控制器的脏状态设置。

Now I'm creating a unit test to check that once I type in the input the dirty state of the form controller is set.

我使用jQuery.trigger（）来模拟这一点，但我什么也得不到......

I'm using jQuery.trigger() to simulate this, but I get nothing...

var input = $('input');
var e = $.Event('keydown');
e.which = 'x'.charCodeAt(0);
e.keyCode = 'x'.charCodeAt(0);
input[0].focus();
input.trigger(e);

我有一个plunker rel=\"nofollow\">

I have a plunker here

我在做什么错了？

谢谢！

推荐答案

从<一个href=\"http://stackoverflow.com/questions/10685520/trigger-the-jquerys-key$p$pss-event-on-an-input-text/10685653#10685653\">answer一个类似的问题：

你正在做的错误是你期待什么jQuery的
  触发方式做。如果检查出code你会看到什么
  它做的是实际执行的jQuery注册的事件处理
  并不是DOM Level 3的事件。因为它只是执行的jQuery
  处理你不会导致该事件的变化这是你所需要的
  要触发更新文本框的值属性。

The mistake you're making is what you're expecting the jQuery's trigger method to do. If you check out the code you'll see that what it is doing is actually executing the jQuery registered event handlers not the DOM Level 3 events. Because it's only executing jQuery handlers you wont be causing the change event which is what you need to be triggered to update the value property of the textbox.

相反，你可以更新输入的值，并触发更改或输入事件：

Instead you can update the input's value and trigger the change or the input event:

input.val('x').trigger('input');

当在现场应用这样一个控制器内但是（在单元测试环境中反对），你需要打出来的$消化周期的，否则你将获得 $申请已在建错误。

When doing this inside a controller in a live application however (as opposed to in the unit test environment), you need to break out of the $digest cycle, or you will get the $apply already in progress error.

您可以通过例如使用做到这一点的setTimeout ：

You can do this by for example using setTimeout:

$scope.trigger = function() {
  setTimeout(function() {
    $('input').val('x').trigger('input');
  });
};

您还需要确保您AngularJS之前加载jQuery的。如果不这样做，角将使用jqLit​​e来代替。 jqLit​​e使用的addEventHandler 来注册事件处理程序和处理程序注册这样不要被jQuery的触发器触发功能。

You also need to make sure that you are loading jQuery before AngularJS. If you don't, Angular will use jqLite instead. jqLite uses addEventHandler to register event handlers, and handlers registered this way don't get triggered by jQuery's trigger function.

您的code的演示更新： HTTP ：？//plnkr.co/edit/u3ZWXWLvOjbKWlY8JEM5 p = preVIEW

在单元测试：

it('should work', function() {

  var element = $compile('<form name="form"><edit ng-model="name"></edit></form>')($scope);
  $rootScope.$digest();

  var scope = element.scope(),
    form = scope.form,
    input = element.find('input');

  expect(form.$dirty).toBe(false);

  input.val('x').trigger('input');

  expect(form.$dirty).toBe(true);
});

单元测试的演示： 的http：// plnkr.co/edit/Emc3dIlDaxXyE9U6dEG6?p=$p$pview

这篇关于发送KEYDOWN到角指令与jQuery .trigger（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！