Change event on input not being fired from angular directive
Question
Why is this change event that I add to an input element from an angular directive not being fired when the marked input element loses focus?
UPDATE: The jqlite docs say - "a subset of the operations which jQuery supports are currently implemented"... and they specifically list .change under event handlers. The current answers contradict this, but I'd like to hear the authors explicitly say "the docs are wrong", or "your understanding of the docs is wrong". Currently it looks like the they have skimmed the first few lines and gone no further. No-one learns if I adopt a different way when actually there's another mistake that I haven't caught and I could easily make again.
app.directive('changeDirective', function() {
return {
link: function(scope, elem, attrs) {
return elem.change(function() {
alert("Change!");
});
}
};
});
<html ng-app="plunker">
<head>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script src="app.js"></script>
</head>
<body>
input with change listener<input type="text" change-directive="true">
<br/>
select this to remove focus from other input <input type="number">
</body>
</html>
2 answers
solution1
0 2014-06-22 22:14:46
Angular.js uses jqLite as a jQuery replacement and it doesn't have all of jQuery's functions.
jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.
Try using the on method instead:
return elem.on('change', function() {
alert("Change!");
});
Check this link for more info about angular.element .
solution2
0 2014-06-22 22:21:14
Firstly, AngularJS uses jqLite , a subset of jQuery which does not include a .change method. You should use .on instead.
Secondly, the change event does not trigger when an element loses focus. Use the blur event instead. You can use both the blur and change events together if you use the .on method.
Code:
return elem.on('blur change', function() {
alert('Change!');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.