En AngularJS, puede usar los mecanismos de transmisión de eventos de $ transmisión, $ emit, $ on para comunicarse entre diferentes ámbitos.
introducir:
El propósito de $ transmisión es propagar eventos del alcance de los padres al alcance infantil, incluido sí mismo. El formato es el siguiente: $ Broadcast (EventName, Args)
El propósito de $ emit es propagar eventos del alcance infantil al alcance principal, incluido el alcance de la raíz. El formato es el siguiente: $ emit (EventName, Args)
$ ON se utiliza para monitorear los eventos propagados de los ámbitos de los niños o de los padres y los datos correspondientes en el alcance. El formato es el siguiente: $ on (evento, datos)
En la descripción anterior, EventName es el nombre del evento que debe ser monitoreado, el evento de parámetro en el método $ on es el objeto relevante del evento, y los datos son los datos propagados por el evento.
El parámetro del evento en el método $ on tiene las siguientes propiedades y métodos
Atributos del evento/Método Descripción funcional
| Propiedades/métodos del evento | Descripción funcional |
|---|---|
| Event.TargetScope | Obtenga el alcance del evento de propagación |
| evento. Currentscope | Obtenga el alcance del evento recibido |
| evento. Nombre | El nombre del evento extendido |
| Event.stopPropagation () | Evitar eventos de propagación de burbujas, solo válido en eventos de $ emits |
| event.preventDefault () | Evitar que ocurran eventos de propagación |
| evento. Defaultprevented | Devolver verdadero si se llama a PreventDefault Event |
Código:
<! Doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> </title> <meta charset = "utf-8"/> <script src = "aJJSS = angular.module ("myApp", []); // Controller self MyApp.Controller ("self", function ($ scope, $ window) {// Evento de propagación de botón $ scope.toparent = function () {// registra un evento que se propagó hacia arriba, eventName: 'defilsself', data: OneObject $ scope. $ Emit ("de sí mismo", {Divname: "Self", descripción: "Propagate Data a The Turno; $ Scope.ToChild = Function () {// Registre un evento que se propaga hacia abajo, EventName: 'DeSelf', Data: OneObject $ SCOPE. $ window.alert ("nodo actual" + event.currentscope.name + "eventos interceptados de" + data.divname + ":" + event.name + ", su función es" + data.description); // Controller Parent myapp.Controller ("parent", function ($ scope, $ window) {$ scope.name = "parent"; // $ on se usa para eventos $ scope. $ On ("fromelf", function (event, data) {$ window.alert ("node actual" + event.currentscope.name + ", eventos interceptos de" + data.divname ":" event.currentscope. la función es " + data.description);}); $ scope. $ on (" fromchild ", function (event, data) {$ window.alert (" nodo actual " + event.currentscope.name +", eventos interceptados de " + data.divname +": " + event.name +", su " + data.description);});}); // Controller Child MyApp.Controller ("Child", Function ($ Scope, $ Window) {$ scope.name = "child"; // $ on se usa para interceptar eventos desde el alcance principal $ scope. $ On ("fromself", function (event, data) {$ window.alert ("actual nodo" + event.currentscope.name + "de" + data.div.div.div.divname Event.name + ", su función es" + data.description); </script> </head> <body> <forma name = "test"> <div ng-controller = "parent"> Aquí está el principal div <div ng-concontroller = "self"> aquí está el niño selfDiv <input type = "botón" ng-click = "toparent ()" value = "propage Event to ParentDiv"/> <input type = "button" ng-click = "tochild (" valera = "value" value "value" value "value" value "value" value "value" value "valeer" " a ChildDiv "/> <div ng-concontroller =" Child "> Aquí está el niño ChildDiv <input type =" button "ng-chick =" totop () "value =" cargar evento "/> </div> </div> <div ng-controller =" borther "> Aquí está el hermano de sí mismo BortherDiv </div> </iviv> </form> </body> </html>.Código
Efecto:
Otras propiedades:El evento anterior transmitido en AngularJS: un análisis exhaustivo de $ transmisión, $ emit, $ on es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.