Javascript Girl
  1. Javascript Girl
  3. Directives AngularJS – meilleures pratiques lors de l'utilisation de ngModel avec le widget jQuery
Intereting Posts
Comment faire le masquage de la date à l'aide de javascript (sans JQuery)? Dans ECMAScript5, quelle est la portée de "l'utilisation stricte"? Accès à un tableau de zones de saisie HTML en utilisant jQuery ou Javascript simple Signature js sur chrome avec keystore OS Comment puis-je écrire un plugin de script Java "Hello World" basique dans PhoneGap? Comment créer une barre qui reste en haut lors du défilement? Boucle des appels ajax – accès au compteur en boucle? AngularJS conditionnel ng-disabled ne réactive pas CSS / JavaScript / piratage: Détecter: style de visite sur un lien * sans * vérifier directement ou le faire plus vite que moi Est-il possible de pincer pour zoomer en cordova Comment déterminer si un javascript était déjà chargé par un autre fichier html JavaScript pour contrôler l'animation d'image? Comment transformer une chaîne en un appel de fonction JavaScript? JQuery chacun Rouleau lisse Javascript sans l'utilisation de jQuery

Directives AngularJS – meilleures pratiques lors de l'utilisation de ngModel avec le widget jQuery

Voici mon problème. Par exemple, nous avons la directive suivante, qui utilise un widget jQuery derrière les scènes: 

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); }); } }; }]);

Donc, si la valeur du modèle change, le gestionnaire enregistré avec $ watch pour écouter les changements dans le modèle sera exécuté et, par conséquent, la méthode 'set_value' du widget sera également exécutée. Cela signifie que l'événement 'value_updated' sera déclenché.

Ma question est la suivante: quelle est la meilleure pratique pour implémenter un comportement similaire dans les directives afin d'éviter les appels supplémentaires des gestionnaires d'événements DOM et des observateurs?

Au lieu de la scope.$watch() , je suggère de mettre en œuvre ctrl.$render() . $ Render ne devrait être appelé que si quelque chose à l'intérieur de Angular change le modèle. Exemple de violon .

Cela résout un problème que vous n'avez pas mentionné. Malheureusement, cela ne résout pas le problème que vous avez mentionné. Dans le violon, un événement blur est lié plutôt qu'un événement widget.on (). Peut-être que cela fonctionnerait pour vous – c.-à-d., Ne mettez le modèle en évidence que sur chaque frappe (cela suppose que votre widget accepte des frappes de touche, cependant).

Peut-être que vous pourriez également demander à l'auteur du widget de fournir une méthode "set" qui ne déclenche pas un événement. Ensuite, cela pourrait être utilisé dans la méthode $ render ().