AngularJS – Modification de la valeur d’entrée d’une directive d’atsortingbut

J’ai une directive d’atsortingbut AngularJS et j’aimerais effectuer une action chaque fois que la valeur de l’entrée parent change. En ce moment je le fais avec jQuery:

angular.module("myDirective", []) .directive("myDirective", function() { return { ressortingct: "A", scope: { myDirective: "=myDirective" }, link: function(scope, element, attrs) { element.keypress(function() { // do stuff }); } }; });

Est-il possible de le faire sans jQuery? Je trouve que l’événement keyPress ne fait pas exactement ce que je veux, et même si je suis sûr que je trouverai une solution, je deviens un peu nerveux lorsque j’utilise jQuery dans un projet Angular.

Alors, quelle est la manière angular de faire cela?

Il y a un bon exemple dans les documents AngularJS .

C’est très bien commenté et devrait vous orienter dans la bonne direction.

Un exemple simple, peut-être plus, ce que vous cherchez est ci-dessous:

jsfiddle

HTML

JavaScript

 angular.module('myDirective', []) .directive('myDirective', function () { return { ressortingct: 'A', link: function (scope, element, attrs) { scope.$watch(attrs.ngModel, function (v) { console.log('value changed, new value is: ' + v); }); } }; }); function x($scope) { $scope.test = 'value here'; }

Edit: Même chose, ne nécessite pas ngModel jsfiddle :

JavaScript

 angular.module('myDirective', []) .directive('myDirective', function () { return { ressortingct: 'A', scope: { myDirective: '=' }, link: function (scope, element, attrs) { // set the initial value of the textbox element.val(scope.myDirective); element.data('old-value', scope.myDirective); // detect outside changes and update our input scope.$watch('myDirective', function (val) { element.val(scope.myDirective); }); // on blur, update the value in scope element.bind('propertychange keyup paste', function (blurEvent) { if (element.data('old-value') != element.val()) { console.log('value changed, new value is: ' + element.val()); scope.$apply(function () { scope.myDirective = element.val(); element.data('old-value', element.val()); }); } }); } }; }); function x($scope) { $scope.test = 'value here'; }

Comme cela doit avoir un élément d’entrée en tant que parent, vous pouvez simplement utiliser

Vous pouvez également utiliser ngModelController et append une fonction à $formatters , qui exécute les fonctions sur les modifications apscopes aux entrées. Voir http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

 .directive("myDirective", function() { return { ressortingct: 'A', require: 'ngModel', link: function(scope, element, attr, ngModel) { ngModel.$formatters.push(function(value) { // Do stuff here, and return the formatted value. }); }; };

Pour surveiller l’évolution de la valeur d’exécution d’une directive personnalisée, utilisez la méthode $observe de l’object attrs , au lieu de placer $watch dans une directive personnalisée. Voici la documentation pour le même … $ observer docs