0

I'm using jQuery timepicker for bootstrap. With the help of Angular UI-Utils jQuery passthrough, I was able to make the clockface show up.

<input type="text" ui-jq="clockface"
       ng-model="data.Event.time_end" data-format="hh:mm A" />

However, the value of the ng-model doesn't change if you use the clockface. How do I inform AngularJS of the changes that this plugin is doing?

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
chrony
  • 783
  • 1
  • 8
  • 23
  • This could be what your looking for: http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angular-js – Dave Jones Apr 17 '15 at 23:59
  • Check the link you gave, I actually tried that option too.. same thing the ng-model doesn't get update with the change in value via the jquery plugin (clockface) – chrony Apr 18 '15 at 00:05
  • but if i edit the input text, ng-model gets updated as expected – chrony Apr 18 '15 at 00:06

2 Answers2

2

You can tell angular regarding changes made by jQuery by calling $scope.$apply()

Satyam Koyani
  • 4,236
  • 2
  • 22
  • 48
  • i'm listening to the change event of the input box, but it seems clockface is not triggering that event.. element.bind('change', function() {... – chrony Apr 18 '15 at 00:22
  • @Jasper Did you added this in your directive? – Satyam Koyani Apr 18 '15 at 01:17
  • yes. based from answer below by nsmarks, i listened to the pick.clockface event triggered by clockface and it works now – chrony Apr 18 '15 at 01:33
1

Assuming you're referring to this plugin: http://vitalets.github.io/clockface/

Setup an event handler for pick.clockface as detailed on the website. See this line of code in the plugin for more details: https://github.com/vitalets/clockface/blob/6f2ec125d42c9a9172e54c81625b452c5f96a682/js/clockface.js#L318

All events have second parameter data with current hour, minute and ampm values.

nsmarks
  • 219
  • 2
  • 4
  • Hey Jasper, great! I think you selected the wrong answer though. Can you update this as the correct answer for future viewers? – nsmarks Apr 19 '15 at 16:08