javascript更改事件对angularjs不起作用

Question

我正在探索jqLit​​e并试图了解AngularJS在执行DOM操作和一般普通JavaScript时的工作原理。基本上我一直试图将事件绑定到不同的元素，到目前为止它已经运行良好。模糊，焦点，mouseenter，mouseleave它们在对元素执行.on（＆＃39; event＆＃39;，handler）时都会工作，除了“更改”＃39;输入字段上的元素。

angular
    .module('app')
    .directive('jqLite', jqLite);

/* @ngInject */
function jqLite () {

    return {
        scope: {},
        restrict: 'E',
        template: [
            '<h1>jqLite</h1>',
            '<input type="text" ng-change="onChange()" ng-model="jqLiteInput">',
            '<span style="background: red;">#<span>',
            '<!-- a comment -->'
        ].join(''),
        link: function (scope, element, attrs) {

            var input = element.find('input');

            /* AngularJS also has directives like
            ng-blur ng-focus ng-mouseenter ng-mouseleave but I can bind all of these events
            with .bind() or .on() method as I would usually do on jQuery */

            input.on('focus', function () { console.log(element.contents()); });
            input.on('blur', function () { console.log(element.html()); });

            //input.on('change', function () { console.log('this does not work'); });

            // this works
            scope.onChange = function () { console.log(scope.jqLiteInput + ' ' + element.children()); };

        }
    };

}

这真的很奇怪，我希望有人可以给我一些关于这个的提示。