AngularJS en sí ha proporcionado métodos como directivo y servicio de servicio para realizar el intercambio y la reutilización de datos y código. Sin embargo, en el desarrollo real del proyecto, tal vez debido a ser perezoso o por conveniencia, siempre querrá comunicar directamente el intercambio de datos entre dos controladores o las funciones y métodos de llamadas. Aquí veremos qué métodos pueden cumplir con este requisito.
Servicio singleton
Singleton Service es un método de intercambio de datos y código compatible con AngularJS. Debido a que es un singleton, todos los controladores acceden a los mismos datos. Por ejemplo, se puede implementar el siguiente servicio:
angular .module ('app') .service ('ObjectService', [ObjectService]); function ObjectService () {var list = {}; return {get: function (id) {return list [id]; }, set: function (id, v) {list [id] = v; }};} En un controlador, los datos establecidos por ObjectService.set('i', 1) se pueden obtener a través de ObjectService.get('i') en otros controladores.
Transmisión y eventos
En AngularJS, los parámetros se pueden pasar al activar eventos y enviar transmisiones. Esta característica se puede usar para realizar el intercambio de datos. Hay tres métodos relacionados con eventos y transmisiones, a saber:
1. $ emit (): evento de activación, puede pasar los datos hacia arriba, por ejemplo, el controlador infantil al controlador principal y el controlador al $ Rootscope
2. $ Broadcast (): Enviar una transmisión, que puede pasar los datos hacia abajo, por ejemplo, el controlador principal pasa datos al controlador infantil, o $ Rootscope pasa datos a cualquier controlador
3. $ on (): Escuche eventos y transmisiones, y puede capturar $ emit y $ transmisión
La comunicación entre los controladores se puede dividir en tres situaciones:
1. Sin controlador de asociación directa: use $ rootscope. $ Emit (), $ rootscope. $ Boardcast () o $ alcance. $ Emit para emitir datos y obtener datos a través de $ Rootscope. $ On ()
2. Controlador principal al controlador infantil: el controlador principal usa $ alcance. $ Boradcast () para enviar datos, y el controlador infantil usa $ alcance. $ On () para obtener datos
3. Controlador infantil al controlador principal: el controlador infantil usa $ alcance. $ Emit () para enviar datos, y el controlador principal obtiene datos a través de $ alcance. $ On ()
Aquí están los usos simples:
// un controlerRangular .module ('app') .controller ('onecontroller', ['$ scope', onecontroller]); function onecontroller ($ scope) {var data = {valor: 'test'}; $ RootsCope. $ Broadcast ('Open.Notice.Editor', data);} // Otro controlerRangular .module ('App') .Controller ('OTRO OTROCONTROLLER', ['$ Scope', otro Controller]); function OtroController ($ Scope) {$ Scope. $ on ('abre.notice.editor', función (evento, datos) $ scope.open (datos);Controlador de padres
Si ambos controladores comparten el mismo controlador principal, el intercambio de datos y la comunicación se pueden realizar a través del controlador principal. Por ejemplo:
<div ng-Controller = "ParentController"> <div ng-concontroller = "ChildOnecontroller"> </div> <div ng-concontroller = "childTwocontroller"> </div> </div>
// Controlador principal Angular .module ('App') .Controller ('ParentController', ['$ scope', parentController]); function parentController ($ scope) {// variable para aprobar datos $ scope.data = null;} // childController Angular .module ('APP') .Controller ('ChildonController', ['$' $ '$, [' ',' ', [' $ ShoPope '. ChildOnEcontroller]); function ChildOnEController ($ Scope) {// Configuración de datos $ Scope. $ Parent.data = 1;} // ChildController Angular .Module ('App') .Controller ('ChildTwocontroller', ['$ SCOPE', '$ TimeOut', Childwocontroller]); $ TimeOut) {$ TimeOut (function () {// Data Read Console.log ($ Scope. $ parent.data);}, 1000);}Variables globales o compartidas
AngularJS proporciona encapsulación de dos variables, $ Window y $ LocalStorage . Al modificar y escuchar estos dos valores, se pueden lograr el intercambio de datos y la comunicación entre los controladores. El método es el siguiente:
// un controlerRangular .module ('app') .controller ('onecontroller', ['$ scope', '$ window', onEController]); function onecontroller ($ scope, $ window) {// configuración de datos $ window.data = 1;} // otro controlerRangular .module ('app') .controller ('OTRO OTROTROTROLER' ['$ Scope', otro Controller]); Funcion OtherController ($ Scope) {// Escuche para modificar $ Scope. $ Watch (function () {return $ window.data;}, function (n) {$ scope.windowdata = n;});};De hecho, este método de monitoreo y modificación también se puede utilizar en otros métodos de comunicación.
Vinculación de elementos
En AngularJS, puede obtener la instancia del controlador a través de un elemento. De esta manera puedes obtener rápidamente
Modifique los datos en un controlador o llame a los métodos en este controlador. Por ejemplo:
<div ng-confontroller = "appController"> <div id = "div-a"> </div> </div>
Puede obtener la instancia del controlador a través de los siguientes métodos:
var instancia = angular.element (document.getElementById ('div-a')). Scope ();Luego, puede usar esta instancia para llamar al método del controlador para obtener y modificar el valor. No puede ser posible obtener con éxito si el elemento en sí está obligado a tener un controlador o el elemento principal del elemento está obligado a tener un controlador.
Se trata de compartir datos y comunicación entre controladores angulares. Los amigos interesados en el conocimiento de compartir datos en Angularjs pueden aprender juntos. Gracias por su apoyo a Wulin.com.