19

要素を作成する次の 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

これで、属性changeを使用する代わりにイベントを手動でバインドすると、テストに合格します。ng-change

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

ライブ デモ (手動バインド): http://plnkr.co/edit/dizuRaTFn4Ay1t41jL1K?p=preview

使用してテスト可能にする方法はありng-changeますか？ありがとうございました。

4

5 に答える 5

1

「Angular ディレクティブ トリガー ng-change」をグーグルで検索したところ、この StackOverflow の質問が有用なものに最も近いものだったので、「ディレクティブで ng-change をトリガーする方法」に回答します。この情報を他に提供する方法がわかりません。

ディレクティブのリンク関数内で、これにより要素の ng-change 関数がトリガーされます。

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

element.trigger("change")私にとってはうまくいきelement.trigger("input")ませんでしたし、オンラインで見つけることができるものも何もありませんでした.

例として、blur で ng-change をトリガーします。

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

これがOPの質問に直接答えていないことを申し訳ありません。この情報を共有する場所と方法について、適切なアドバイスをいただければ幸いです。

于 2016-09-05T21:54:53.690 に答える