angularjs - 如何在AngularJS的指令测试中触发ng-change

Question

我有以下 AngularJS 指令创建 input元素。输入有 ng-change运行 doIt() 的属性功能。在我的指令的单元测试中，我想检查 doIt当用户更改输入时调用函数。但是测试没有通过。虽然它在手动测试时在浏览器中工作。

指示:

...
template: "<input ng-model='myModel' ng-change='doIt()' type='text'>" 

测试:

el.find('input').trigger('change') // Dos not trigger ng-change

现场演示(ng-change): http://plnkr.co/edit/0yaUP6IQk7EIneRmphbW?p=preview

现在，如果我手动绑定(bind) change，则测试通过事件而不是使用 ng-change属性。

template: "<input ng-model='myModel' type='text'>",
link: function(scope, element, attrs) {
  element.bind('change', function(event) {
    scope.doIt();
  });
}

现场演示(手动绑定(bind)): http://plnkr.co/edit/dizuRaTFn4Ay1t41jL1K?p=preview

有没有办法使用 ng-change并使其可测试？谢谢你。

Answer 1

我用谷歌搜索了“Angular 指令触发 ng-change”，这个 StackOverflow 问题是我最接近任何有用的问题，所以我会回答“如何在指令中触发 ng-change”，因为其他人一定会登陆这个页面，而且我不知道如何提供此信息。

在指令的链接函数内，这将触发元素上的 ng-change 函数:

element.controller('ngModel').$viewChangeListeners[0]();

element.trigger("change")和 element.trigger("input")对我没有用，我在网上也找不到其他任何东西。

例如，在模糊时触发 ng-change:

wpModule.directive('triggerChangeOnBlur', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('blur', function () {
                element.controller('ngModel').$viewChangeListeners[0]();
            });
        }
    };
}]);

很抱歉，这不是直接回答 OP 的问题。我将非常乐意就在何处以及如何共享此信息提出一些合理的建议。