Direttive AngularJS - best practice quando si utilizza ngModel con widget jQuery

Question

Ecco il mio problema. Per esempio, abbiamo la seguente direttiva, che utilizza alcuni widget di jQuery dietro le quinte:

module.directive('myWidget', [function() { 
    return { 
     require: "ngModel", 
     restrict: "A", 
     replace: true, 
     templateUrl: "templates/myWidget.html", 
     link: function(scope, element, attrs, ctrl) { 
      element.widget_name().on('value_updated', function(event) { 
       scope.$apply(function() { 
        var newModelValue = event.some_value; 
        ctrl.$setViewValue(newModelValue); 
       }); 
      }); 

      scope.$watch(attrs["ngModel"], function(value){ 
       element.widget_name('set_value', value); 
      }); 
     } 
    }; 
}]); 

Quindi, se poi verranno eseguiti il ​​gestore che è registrato utilizzando $ orologio per ascoltare i cambiamenti nel modello cambia il valore del modello, e, di conseguenza, verrà eseguito anche il metodo 'set_value' del widget. Ciò significa che verrà attivato l'evento 'value_updated'.

La mia domanda è: qual è la prassi migliore per implementare comportamenti simili nelle direttive per evitare chiamate extra di gestori di eventi DOM e osservatori?

Answer 1

Invece di scope.$watch(), suggerisco di implementare ctrl.$render(). $ render dovrebbe essere chiamato solo se qualcosa all'interno di Angular cambia il modello. Fiddle example.

Questo risolve un problema che non hai menzionato. Sfortunatamente, non risolve il problema che hai menzionato. Nel violino viene associato un evento blur anziché un evento widget.on(). Forse funzionerebbe per te –, ad esempio, aggiorna il modello solo su sfocatura, anziché su ogni sequenza di tasti (questo presuppone che il tuo widget accetti le sequenze di tasti, comunque).

Forse potresti anche chiedere all'autore del widget di fornire un metodo "set" che non attivi un evento. Quindi potrebbe essere usato nel metodo $ render().