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
– Jai, Commented Dec 24, 2015 at 9: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
– Furqan Misarwala, Commented Dec 24, 2015 at 9: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 angular-ui.github.io/bootstrap/#/timepicker as well :) — Teknotica
– Teknotica, Commented Dec 24, 2015 at 9:19
You could find better explanation here stackoverflow.com/a/29194068/2435473 — Pankaj Parkar
– Pankaj Parkar, Commented Dec 29, 2015 at 19:09

cdauth · Accepted Answer · 2015-12-29 17:02:39Z

6

+50

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, 2015 at 17:02

answered Dec 29, 2015 at 11:55

cdauth

7,9693 gold badges49 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Furqan Misarwala Over a year ago

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.

cdauth Over a year ago

What do you mean, they are not accessible in it? What error message are you receiving?

cdauth Over a year ago

Also, it should be $scope instead of scope, I just saw that that’s how your parameter is called.

cdauth Over a year ago

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.

Furqan Misarwala Over a year ago

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

|

Collectives™ on Stack Overflow

Jquery Timepicker doesn't update model in AngularJS directive

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related