Jquery Timepicker doesn't update model in AngularJS directive

Question

When I press any keyboard key, e.g. 0, and if I lose focus, it automatically gets set to control as 00:00, but it does not update the model value.

angular.module('test').directive('timePicker', [function () {
return {
  restrict: 'A',
  require: 'ngModel',
  scope: {
    model: '=ngModel'
  },
  link: function ($scope, element, attrs, ngModelCtrl) {

    element.timepicker({'timeFormat' : 'H:i'});

    ////element.on('change', function () {
    ////  scope.$apply(function () {
    ////    scope.model = element.datepicker('getTime');
    ////  });
    ////});


    ////$scope.$watch('model', function (newValues, oldValues, scope) {
    ////  console.log("Nothing here");
    ////});       
  }
}
}]);



<input id="startTime" type="text" name="startTime" data-ng-model="vm.data.StartTime" time-picker  />

I am not able to validate time because of model is not updated. commented code is what I have tried to update value.

Any ideas on how to fix this?

have you defined the module properly, as i can see you have used a getter of module syntax. — Jai, Dec 24 '15 at 09:01
Yes, It is working when I select a value from dropdown , only issue is when it automatically set value at that time model value is not updated. — Furqan Misarwala, Dec 24 '15 at 09:09
I think you had it right, with the binding of the element on change, although you should be using "$scope.$apply()" (with a $ at front as you are passing it like that in the function) instead of "scope.$apply()". Have a look at https://angular-ui.github.io/bootstrap/#/timepicker as well :) — Teknotica, Dec 24 '15 at 09:19
You could find better explanation here http://stackoverflow.com/a/29194068/2435473 — Pankaj Parkar, Dec 29 '15 at 19:09

cdauth · Accepted Answer · 2015-12-29T17:02:39.857

6

This happens because the timepicker changing the value of the input field (probably using $("input").val("newval")) does not trigger any event that angular is listening on in order to start a digest cycle.

Sponateously, I can find an angular-jquery-timepicker that you might want to use. Looking at its source code, it seems like it is listening for a changeTime event:

element.on('changeTime', function () {
  $scope.$apply(function () {
    $scope.model = element.val();
  });
});

The changeTime event is also documented (see “Event Example”).

Try it out in this Plunkr. It turns out that listening for the change event also works.

edited Dec 29 '15 at 17:02

answered Dec 29 '15 at 11:55

cdauth

6,171
3
41
49

I already know this library, but I need to know what is wrong in my code that change event is fired but linker parameter are not accessible in it. – Furqan Misarwala Dec 29 '15 at 12:08
What do you mean, they are not accessible in it? What error message are you receiving? – cdauth Dec 29 '15 at 12:15
Also, it should be `$scope` instead of `scope`, I just saw that that’s how your parameter is called. – cdauth Dec 29 '15 at 12:17
In that case I don't know what you mean by “parameters are not accessible”. From the JavaScript perspective, I think it’s not possible that you cannot access `$scope` if you run the code inside the link function. – cdauth Dec 29 '15 at 16:47
you are right, it must be accessed but for some reason it was not, BTW I am able to run the code without any undefined object exception – Furqan Misarwala Dec 29 '15 at 16:55
Thanks for spending your precious time – Furqan Misarwala Dec 29 '15 at 16:58

Jquery Timepicker doesn't update model in AngularJS directive

1 Answers1