0

I am creating a directive that is using this timezone picker jQuery plugin, so that we have a timezone picker "widget" throughout our app. The problem I'm running into is that when you select a timezone, it just changes the value of the select elements. So, the element has the right value, but my model does not. I was thinking I just had to throw a scope.$apply() in there, but after a while, I realized that is for updating the view from a model that changed outside of angular. My problem is the opposite. How to I update my model from my view that has changed outside of angular? Here's a simple fiddle that illustrates the problem: http://jsfiddle.net/tWzwA/

I'm thinking the ngModelController could help me here, but I don't know how I would get access to it, and what exactly I would do with it. Can someone please point me in the right direction? Thanks.

dnc253
  • 39,967
  • 41
  • 141
  • 157
  • You should wrap the jQuery plugin in a directive, and not accessing DOM from angularJS controllers/services/anything-but-directives, you really lose the benefit of angularJS design if you go that way. – Guillaume86 Apr 26 '13 at 16:10
  • I'm not sure I understand what you're saying. I am wrapping the plugin in a directive. The plugin updates my HTML element. When the plugin updates the select element, how do I get that value into the Angular world? – dnc253 Apr 26 '13 at 19:18
  • your directive should listen to plugin events and update angular scope or emit scope events accordingly – Guillaume86 Apr 26 '13 at 19:47
  • Right, and I've done that with other plugins. Unfortunately, this plugin does not provide any callbacks or events for when a time zone is picked. I toyed with the idea of modifying the source code, but I wanted to know if there was a way I could do this within angular. – dnc253 Apr 26 '13 at 20:55
  • ok, you can still manually bind to element.change in the directive, sorry I can't help more but the plugin page is not very explicit – Guillaume86 Apr 26 '13 at 21:02
  • Yeah, I tried binding to the change event as well, but that event isn't fired (http://stackoverflow.com/questions/4672505/why-does-the-jquery-change-event-not-trigger-when-i-set-the-value-of-a-select-us). I know what you mean about the plugin page. I looked for some time trying to find some hook, until I eventually just looked at the source code and found where the `val()` was being called on the select. No event or callback or anything. – dnc253 Apr 26 '13 at 21:06

1 Answers1

0

You should define the update function on your controller:

$scope.updateDropDownDirectly = function(value){
        $scope.myModel = value;
    };

Then change the events from onclick to ng-click and let angular manage them:

<button ng-click="updateDropDownDirectly(1)">1</button>

See this jsFiddle

Eugenio Cuevas
  • 10,858
  • 3
  • 29
  • 51
  • If it was my code, that's exactly what I would do. The fiddle was meant to illustrate what the plugin is doing - code I have no control over. – dnc253 Apr 26 '13 at 19:13