AngularJS directive to run after text input changes

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.

Agop · Accepted Answer · 2015-07-07 17:42:31Z

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.

Okay, I'll have to do some manipulating, but it looks like this will work. Thanks!
Yup, I know it's not ideal in the short-term, but it'll be worth it in the long-term.

whatoncewaslost · Accepted Answer · 2015-07-07 14:24:05Z

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

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

Collectives™ on Stack Overflow

AngularJS directive to run after text input changes

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related