9

我正在为 Angular 指令编写一些测试，我需要模拟用户输入到输入字段中。我试图这样做：

element.find('input').val('some value').trigger('input');

但它没有用。触发change也没有用。我知道我可以直接访问元素范围element.scope()并对其进行更改，但更改输入值并让 Angular 进行数据绑定似乎更自然。

对于它的价值，我已经input(name).enter(value)从 Angular ngScenario 签出，它似乎和我做的一样：

...
input.val(value);
input.trigger(event || (supportInputEvent ? 'input' : 'change'));
...

我错过了什么？在这种情况下是否有更好的方法来测试用户输入？

（我做了一个jsFiddler脚本来说明这个问题）

更新

我认为需要进行一些澄清。我并不想改变 DOM 或 Angular 领域本身之外的范围。我有一个指令，它呈现一个绑定到指令范围属性的输入框。我正在编写自动化测试以确保指令执行它应该做的事情，并且一个测试应该做的是模拟一些输入，以便更新指令范围，并且我可以断言在该输入上执行了某些行为。正如我之前提到的，我可以使用 更改测试代码中指令的范围element.scope()，但我宁愿更改输入的值并让 Angular 来做它的事情。

4

2 回答 2

7

在花了更多时间研究和测试之后，我发现了问题所在：jqLit​​e 使用注册事件处理程序addEventHandler并且它们不会被 jQuerytrigger函数触发。我的 jsFiddle 脚本不起作用，因为 Angular 的脚本在 jQuery 之前被加载（因此使用的是 jqLit​​e）。我更新了脚本，以正确的顺序加载所有内容，以便 Angular 使用 jQueryon函数注册事件处理程序，现在它模拟输入框上的更改并告诉 Angular 进行数据绑定。

由于同样的原因，我的测试代码无法正常工作。我也通过更改脚本顺序来修复它。如果我没有碰巧使用 jQuery，我将不得不通过调用dispatchEvent而不是trigger.

于 2013-07-31T05:53:59.757 回答
-2

这不是以角度来执行此操作的正确方法。你应该这样做。

工作演示

在 $scope 内创建函数并更改您的变量值，以便 Angular 本身将更新您的输入字段以及您使用（绑定）此变量的所有位置。

Angular Function

$scope.changeInput = function() {
    $scope.value="barfoo";
}
于 2013-07-30T07:34:44.970 回答