javascript - example - ¿Cuál es la mejor manera de manejar eventos en AngularJS en este caso?

funciones en angularjs

Question

Soy absolutamente nuevo en AngularJS y tengo las siguientes dudas sobre cómo manejar el evento en Angular.

Entonces sé si, en mi opinión, tengo algo como esto:

<input type="text" ng-model="handle" />

significa que existe un enlace bidireccional entre este elemento de entrada en el dominio y una variable de control en el $ scope angular, por ejemplo:

$scope.handle = '''';

Por lo tanto, cualquier cambio que se produzca en este objeto de entrada implica un cambio en la propiedad handle en $ scope y viceversa.

Entonces, en la aplicación Angular, puedo declarar explícitamente

// I explicitly declare a whatcher on the handle property: when the value of this propertu change the function() is performed:
$scope.$watch(''handle'', function(newValue, oldValue) {
console.info(''Changed!'');
console.log(''Old:'' + oldValue);
console.log(''New:'' + newValue);
});

Por lo tanto, debe tener el mismo significado que agregar manualmente un JavaScript EventListener clásico de vanilla (por addEventListener () en el objeto que quiero observar en una clásica aplicación de JavaScript de vanilla (que no usa Angular).

Cuando algo cambia en el valor de entrada, se ejecuta la función asociada al whatcher.

Ok, está bastante claro para mí.

Ahora digo que también puedo hacer algo como esto.

En el código HTML puedo tener algo como:

<input type="button" value="Click Me" ng-click="alertClick()" />

Y en el controlador angular tendré algo así como:

$scope.alertClick = function() {
alert("Clicked !!!");
}

Por lo tanto, parece que la directiva ng-Click realiza una función que es un campo $ scope cuando hay un evento click en el botón.

¿Pero puedo hacer la misma operación que hice en el primer ejemplo? ¿Puedo hacerlo declarando un whatcher en el botón si está asociado a un objeto modelo por la directiva ng-model = "handle" ?

¿Cuándo es mejor utilizar el primer método y cuándo es mejor el segundo método para manejar eventos en AngularJS?

Answer 1

Los "métodos" de arrastre que señaló no son la misma cosa. En absoluto.

El primero, $ watch, está destinado a escuchar los cambios de $ scope. Puede especificar qué propiedad del alcance desea ver, y cuando ocurre un cambio lo llamará a la función de devolución de llamada. Para obtener más detalles, consulte la documentación del ciclo Resumen .

La segunda directiva de atributo ng-click , escucha los eventos DOM y evalúa la expresión que pasas cuando ocurre el evento.

En su caso, para el botón, tiene dos opciones. Puede usar la directiva de atributo ng-click para activar una función en su ámbito O utilizar la directiva de atributo ng-submit en la etiqueta html de formulario de sus entradas. De esta forma, puede activar la validación del formulario con el botón o cuando se presiona Intro.

Consulte la documentación para ngEnviar .

Answer 2

Use el evento click. $ scope. $ watch debería usarse para ver cuando algo cambia en lugar de cosas que son mejores para los manejadores de eventos.

Answer 3

ngModel se aplica a elementos específicos como input, select y textarea. Como resultado, no puede usar ngModel en un botón. Es por eso que usa ngClick para obtener el evento click.

Answer 4

ngModel se utiliza para vincular una interfaz de la interfaz de usuario a su controlador

ngClick es solo una expresión regular de javascript que tiene acceso al alcance de su controlador que se ejecutará en el evento click.

Aquí tienes que usar ng-click.

Con angular, una buena práctica es evitar el uso de funciones como addEventListener () o Jquery, otra función ... Debido a que AngularJS envuelve toda esta funcionalidad y ejecutará digest loop o cualquier otra magia vudú si es necesario.