El alcance en AngularJS tiene una estructura muy jerárquica y bien ininterrumpida. Todos tienen un $ Rootscope principal (es decir, la aplicación angular correspondiente o NG-APP), y luego todas las demás partes del alcance se heredan de este $ Rootscope, o están anidados bajo el alcance principal. Muchas veces, encontrará que estos ámbitos no comparten variables ni heredan nada de otro prototipo.
Entonces, en este caso, ¿cómo se comunica entre los ámbitos? Una opción es crear un servicio singleton en el alcance de la aplicación y luego manejar las comunicaciones para todos los subconjuntos a través de este servicio.
Hay otra opción en AngularJS: manejar las comunicaciones a través de eventos en el alcance. Pero este enfoque tiene algunas limitaciones; Por ejemplo, no puede extender ampliamente los eventos al alcance de todo el monitoreo. Debe elegir si se comunica con el alcance de los padres o el alcance infantil.
$ ON, $ emit y $ transmitido hacen que la transferencia de eventos y datos entre controladores sea simple.
Los ejemplos son los siguientes
código HTML
<div ng-concontroller = "parentCtrl"> <!-parent-> <div ng-concontroller = "selftrl"> <!-self-> <a ng-click = "click ()"> haga clic en mí </a> <div ng ng-concontroller = "childCtrl"> </iv> <!-child-> </iv> <iv div ng-controller = "" <!-Padre-> </div>
código JS
app.controller ('selftrl', function ($ scope) {$ scope.click = function () {$ scope. $ broadcast ('to-child,' child '); $ scope. $ emit (' to-parent ',' parent ');}}); app.controller (' parentCtrl ', function ($ scope) {$ scope. función (evento, datos) {console.log ('parentCtrl', data); $ Scope. $ on ('to-child', function (event, data) {console.log ('childCtrl', data); // El niño puede obtener el valor}); function ($ scope) {$ scope. $ on ('to-parent', function (event, data) {console.log ('broctrl', data); // El valor no se obtiene por el nivel});Resultado final
Parentctrl padre
Niño infantil
$ emit y $ transmisión pueden pasar múltiples parámetros, y $ ON también puede recibir múltiples parámetros.
El parámetro de evento del evento En el método $ on, sus propiedades y métodos de objeto son las siguientes
| Propiedades del evento | Objetivo |
|---|---|
| Event.TargetScope | Alcance de emitir o propagar el evento original |
| evento. Currentscope | Alcance de los eventos que actualmente se están procesando |
| evento. Nombre | Nombre del evento |
| Event.stopPropagation () | Una función que evita que los eventos se propagen aún más (burbujeando/capturando) (esto solo funciona para eventos emitidos con '$ emit`) |
| event.preventDefault () | Este método en realidad no hace nada, pero establecerá `defaultprevented` en verdadero. No verifica el valor de 'DefaultPrevented' hasta que el implementador del oyente de eventos tome medidas. |
| evento. Defaultprevented | cierto si se llama `prevenDefault` |
Se siente mucho más conveniente que la comunicación de servicio en diferentes controladores ~~
Lo anterior es una compilación de información sobre AngularJS $ on, $ emit y $ transmitido. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!