web-dev-qa-db-fra.com

AngularJS - Modification de la valeur d'entrée de la directive d'attribut

J'ai une directive d'attribut AngularJS et je voudrais entreprendre 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 {
        restrict: "A",
        scope:
        {
            myDirective: "=myDirective"
        },
        link: function(scope, element, attrs)
        {
            element.keypress(function()
            {
                // do stuff
            });
        }
    };
});

Est-il possible de faire cela sans jQuery? Je trouve que l'événement keyPress ne fait pas exactement ce que je veux, et bien que je sois sûr de trouver une solution, je suis un peu inquiet lorsque je recourt à jQuery dans un Angular projet.

Alors, quel est le moyen Angular) de le faire?

jqueryangularjsattributesdirective
39
Mike Pateras

Il y a un excellent exemple dans Docs AngularJS .

C'est très bien commenté et devrait vous faire pointer dans la bonne direction.

Voici un exemple simple, peut-être davantage, que vous recherchez:

jsfiddle

[~ # ~] html [~ # ~] 

<div ng-app="myDirective" ng-controller="x">
    <input type="text" ng-model="test" my-directive>
</div>

JavaScript 

angular.module('myDirective', [])
    .directive('myDirective', function () {
    return {
        restrict: '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 ngModeljsfiddle :

JavaScript 

angular.module('myDirective', [])
    .directive('myDirective', function () {
    return {
        restrict: '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';
}
63
Langdon

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

<input type="text" ng-model="foo" ng-change="myOnChangeFunction()">

Vous pouvez aussi utiliser le ngModelController et ajouter une fonction à $formatters, qui exécute les fonctions lors du changement d’entrée. Voir http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

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

Pour surveiller les modifications de la durée d'exécution d'une directive personnalisée, utilisez $observe méthode de attrs objet, au lieu de mettre $watch dans une directive personnalisée. Voici la documentation pour le même ... $ observer docs

0
Shivam