navigationend - Directiva AngularJS vigencia del reloj

title angular 6

Question

Intento crear una directiva que debe realizar algunas acciones cuando un campo de entrada está marcado como no válido. Para este ejemplo, asumamos que tengo una directiva que verifica si la entrada es un número primo, y quiero crear una directiva que agregue una clase al elemento cuando no sea válida:

<input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error">

Valide-Prime utiliza los analizadores y formateadores en ng-model para actualizar la validez del modelo.

Ahora quiero que la directiva de clase agregada no válida agregue la clase "error" cuando el modelo no es válido, y que la elimine cuando sea válida. En otras palabras, debe ver la propiedad $ valid (o $ invalid) del controlador modelo. Sin embargo, no puedo averiguar cómo hacer que esto funcione. Lo intenté:

link : function(scope, element, attrs, ctrl) {
ctrl.$watch("$valid", function(newVal, oldVal) {
//never fired
});
}

Tal vez podría ver alguna variable en el alcance, pero no sé qué variable ver.

Entonces, ¿cómo puedo ser notificado cuando cambia la validez de un modelo?

Answer 1

Nuestro objetivo, en general, debe ser hacer que una directiva funcione independientemente de cualquier forma o aporte. ¿Cómo podemos permitir que lea la propiedad local $valid sin vincularla de forma imperativa a un solo formulario y nombre de entrada específicos?

Solo use require: ''ngModel'' como una de las propiedades de su configuración de directiva. Esto inyectará el controlador ngModel local como el cuarto argumento de la función de enlace, y puede colocar $watch directamente sobre $valid sin necesidad de vincular la implementación de la directiva con ningún formulario o entrada en particular.

require: ''ngModel'',
link: function postLink(scope, element, attrs, controller) {
scope.inputCtrl = controller;
scope.$watch(''inputCtrl.$valid'', handlerFunc)
}

El manejador debe activar constantemente los cambios a $ válidos con esa estructura. Vea este violín , donde la entrada se valida para el patrón de un código postal de EE. UU. O Zip + 4. Recibirás una alerta cada vez que cambie la validez.

EDICIÓN 3/21/14: Este post previamente quedó colgado en una ilusión mía, fijándose en la causa incorrecta de un problema de implementación. Mi culpa. El ejemplo anterior elimina esa fijación. Además, agregó el violín, que muestra que este enfoque funciona de hecho, y siempre lo hizo, una vez que agregue citas en torno a la expresión de observación.

Answer 2

Si no tiene un <form /> puede obtener fácilmente uno:

En su definición directiva:

require: ''^form''

y luego en su función de enlace, el formulario se pasa como el cuarto parámetro:

 link: function (scope, element, attr, ctrl) {

Ahora no tiene que codificar el formulario o el campo de entrada para realizar el $ watch:

 scope.$watch(ctrl.$name + ''.'' + element.attr(''name'') + ''.$valid'',
function (validity) {});

Answer 3

Si tiene un <form> , agregue un name (asumamos ''myForm'') y un name a su entrada (asumamos myInput ). Debes poder $watch esto por $watch

scope.$watch(''myForm.myInput.$valid'', function(validity) {})

Si no tiene un form , siempre puede mirar una función. De esta manera:

scope.$watch(function() { return ctrl.$valid; }, function(validity){});

Puede leer más sobre el enfoque de formulario here .