AngularJS directives - best practices when using ngModel with jQuery widget

Question

Here is my problem. For example, we have the following directive, which uses some jQuery widget behind the scenes :

module.directive(\'myWidget\', [function() {         


        

Answer 1

Instead of scope.$watch(), I suggest implementing ctrl.$render(). $render should only be called if something inside Angular changes the model. Fiddle example.

This solves a problem you did not mention. Unfortunately, it does not solve the problem you did mention. In the fiddle, a blur event is bound, rather than some widget.on() event. Maybe that would work for you – i.e., only update the model on blur, rather than every keystroke (this assumes your widget is accepting keystrokes, however).

Maybe you could also ask the widget author to provide a "set" method that does not trigger an event. Then that could be used in the $render() method.