我正在探索jqLite并试图了解AngularJS在执行DOM操作和一般普通JavaScript时的工作原理。基本上我一直试图将事件绑定到不同的元素,到目前为止它已经运行良好。模糊,焦点,mouseenter,mouseleave它们在对元素执行.on(' event',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()); };
}
};
}
这真的很奇怪,我希望有人可以给我一些关于这个的提示。