web-dev-qa-db-fra.com

Comment créer une directive sur le changement pour AngularJS?

Normalement, ng-model met à jour le modèle lié chaque fois que l'utilisateur appuie sur la touche:

<input type="text" ng-model="entity.value" />

Cela fonctionne très bien dans presque tous les cas.

Mais il me faut le mettre à jour lorsqu'un événement onchange se produit à la place d'un événement onkeyup/onkeydown.

Dans les anciennes versions de angular, il existait une directive ng-model-instant qui fonctionnait de la même manière que ng-model fonctionne maintenant (du moins pour l'utilisateur - je ne sais rien de leurs implémentations) . vient de donner ng-model qu'il mettait à jour le modèle onchange et lorsque j'ai spécifié ng-model-instant, il mettait à jour le modèle onkeypup.

Maintenant, j'ai besoin de ng-model pour utiliser l'événement "change" de l'élément. Je ne veux pas que ce soit instantané. Quel est le moyen le plus simple de faire cela?

MODIFIER

L'entrée doit toujours refléter tous les autres changements apportés au modèle - si le modèle doit être mis à jour ailleurs, la valeur de l'entrée doit refléter ce changement.

Ce dont j'ai besoin, c'est que la directive ng-model fonctionne de la même manière que dans les anciennes versions de angularjs.

Voici une explication de ce que j'essaie de faire: http://jsfiddle.net/selbh/EPNRd/

eventsangularjs
13
Szymon Wygnański

Ici, j'ai créé la directive onChange pour vous. Demo: http://jsfiddle.net/sunnycpp/TZnj2/52/

app.directive('onChange', function() {    
    return {
        restrict: 'A',
        scope:{'onChange':'=' },
        link: function(scope, Elm, attrs) {
            scope.$watch('onChange', function(nVal) { Elm.val(nVal); });            
            Elm.bind('blur', function() {
                var currentValue = Elm.val();
                if( scope.onChange !== currentValue ) {
                    scope.$apply(function() {
                        scope.onChange = currentValue;
                    });
                }
            });
        }
    };        
});
20
SunnyShah

Voir aussi: la directive AngularJS ngChange.

Lorsqu'elle est appliquée à une <entrée>, les modifications ont lieu après chaque pression sur une touche et non sur l'événement de flou.

http://docs.angularjs.org/api/ng.directive:ngChange

4
reggoodwin

Angularjs: input [text] ngChange est activé lorsque la valeur change : Cette réponse constitue une bien meilleure solution permettant à la directive custom de fonctionner avec ngModel, de sorte que vous pouvez toujours utiliser toutes les autres directives associées à ngModel.

En outre, une solution encore plus flexible permettant de spécifier l’événement à utiliser (pas seulement le flou) et d’autres propriétés devrait être intégrée très prochainement à angular: https://github.com/angular/angular.js/pull/ 2129

2
wired_in

Je ne sais pas s'il existe un meilleur moyen de le faire, mais vous pouvez y parvenir en utilisant une directive personnalisée (pour tout événement jquery de votre choix)

<input type="text" ng-model="foo" custom-event="bar" />
<p> {{ bar }} </p>

// create the custom directive

app.directive('customEvent', function() {
    return function(scope, element, attrs) {
        var dest = attrs.customEvent;

        $(element[0]).on('any-jquery-event', function(e) {
            e.preventDefault();

            // on the event, copy the contents of model
            // to the destination variable
            scope[dest] = scope.foo;

            if (!scope.$$phase)
                scope.$apply();
        });
    }
});
1
xbonez