AngularJS指令在文本输入更改后运行

Question

I am using a bootstrap calendar datepicker that operates and modifies an <input type="text"> element.

If I use ng-change="myAngularExpression()" it calls the function as soon as the text box is clicked. How can I have the function call after the input actually changes?

In my specific case, a user clicks in the text box that is displaying MM/DD/YYYY and a dropdown calendar comes down, then the angular expression executes, then the user changes the value and nothing happens until they click off the element and back on it.

Answer 1

I'm assuming you're using a jQuery-based Bootstrap datepicker. Unfortunately, mixing jQuery-based Bootstrap widgets with Angular rarely works out well.

The better alternative is to use UI Bootstrap , which is a collection of Bootstrap widgets written entirely in Angular. For example, here's a datepicker .

Once you're using Angular for your widgets (with UI Bootstrap), watching for changes to your date becomes as simple as $scope.$watch() :

$scope.$watch('date', function() { /* ... */ });

Full example:

 var app = angular.module('app', ['ui.bootstrap']); app.controller('Main', function($scope) { $scope.date = new Date(); // watch date for changes $scope.$watch('date', function(newValue, oldValue) { if (newValue !== oldValue) { $scope.message = 'Date changed from ' + oldValue + ' to ' + newValue; } }); }); 

 <div ng-app="app"> <div ng-controller="Main"> <datepicker ng-model="date"></datepicker> <div ng-bind="message"></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script> 

Someone may be able to provide an answer that allows the jQuery-based datepicker to work "good enough" with Angular, but that's a slippery road.

Answer 2

How about ng-keydown ? This way the input will change only when you press your key down on it.

<input ng-keydown='someAwesomeMethodHere()'/>