O próprio AngularJS forneceu métodos como diretiva e serviço de serviço para realizar o compartilhamento e a reutilização de dados e código. No entanto, no desenvolvimento real do projeto, talvez por ser preguiçoso ou por conveniência, você sempre desejará comunicar diretamente o compartilhamento de dados entre dois controladores ou chamar funções e métodos. Aqui veremos quais métodos podem atender a esse requisito.
Serviço de Singleton
O Singleton Service é um método de compartilhamento de dados e código suportado pelo próprio AngularJS. Por ser um singleton, todos os controladores acessam os mesmos dados. Por exemplo, o serviço a seguir pode ser implementado:
Angular .Module ('App') .Service ('ObjectService', [ObjectService]); function ObjectService () {var list = {}; return {get: function (id) {return list [id]; }, set: function (id, v) {list [id] = v; }};} Em um controlador, os dados definidos pelo ObjectService.set('i', 1) podem ser obtidos através do ObjectService.get('i') em outros controladores.
Transmissão e eventos
No AngularJS, os parâmetros podem ser passados ao desencadear eventos e enviar transmissões. Esse recurso pode ser usado para realizar o compartilhamento de dados. Existem três métodos relacionados a eventos e transmissões, a saber:
1. $ emit (): evento de gatilho, ele pode passar dados para cima, por exemplo, o controlador filho para o controlador pai e o controlador para o $ rootscope
2. $ transmission (): envie uma transmissão, que pode transmitir dados, por exemplo, o controlador pai passa dados para o controlador filho, ou $ rootscope passa dados para qualquer controlador
3. $ on (): Ouça eventos e transmissões e pode capturar $ emit e $ transmissão
A comunicação entre os controladores pode ser dividida em três situações:
1. Sem controlador de associação direta: use $ rootscope. $ Emit (), $ rootscope. $ Boardcast () ou $ scope. $ Emiti para emitir dados e obter dados através de $ rootscope. $ On ()
2. Controlador pai para o controlador filho: o controlador pai usa $ scope. $ Boradcast () para enviar dados, e o controlador filho usa $ scope. $ On () para obter dados
3. Controlador filho para controlador pai: o controlador filho usa $ scope. $ Emit () para enviar dados, e o controlador pai obtém dados através do $ SCOPE.
Aqui estão os usos simples:
// Um controlErrangular .module ('App') .Controller ('OneController', ['$ SCOPE', OneController]); function OneController ($ scope) {var data = {value: 'test'}; $ rootscope. $ transmitido ('open.Notice.editor', dados);} // Outro controlerrangular .module ('app') .Controller ('outroController', ['$ scope', outro concretista]; function OUTHERCONTROLLER ($ SCOPE), {$ SCOPE. $ scope.open (dados);Controlador pai
Se ambos os controladores compartilharem o mesmo controlador pai juntos, o compartilhamento e a comunicação de dados poderão ser executados através do controlador pai. por exemplo:
<Div ng-controller = "parentcontroller"> <div ng-antroller = "chilhoneController"> </div> <div ng --Controller = "ChildTwocontroller"> </div> </div>
// controlador pai angular .module ('App') .Controller ('ParentController', ['$ SCOPE', ParentController]); função parentcontroller ($ scope) {// variável para transmitir dados $ scope.data = null;} // ChillerCroller angular .module ('aplicativo). ['$ scope', chilhoneController]); função chilhoneController ($ scope) {// configuração de dados $ scope. $ parent.data = 1;} // ChildController angular .module ('App') .Controller ('ChildTwocontroller', ['$ scope', ''). ChildTwocontroller ($ scope, $ timeout) {$ timeout (function () {// Data Leia console.log ($ scope. $ Parent.data);}, 1000);}Variáveis globais ou compartilhadas
AngularJS fornece encapsulamento de duas variáveis, $ Window e $ LocalStorage . Ao modificar e ouvir esses dois valores, o compartilhamento de dados e a comunicação entre controladores podem ser alcançados. O método é o seguinte:
// Um controlErrangular .module ('App') .Controller ('OneController', ['$ Scope', '$ Window', OneController]); function OneController ($ Scope, $ Window) {// Configuração de dados $ window.data = 1;} // outro controlador .module) {// Data Setting $ Window.data = 1;} // OtherlranTular .module) {// Data Setting $ Window.data = 1;} // outro ['$ SCOPE', OUTRO CONTROLLER]); FUNÇÃO OUTRO CONTROLLER ($ SCOPE) {// Ouça modificar $ scope. $ watch (function () {return $ window.data;}, function (n) {$ scope.windowdata = n;});}De fato, esse método de monitoramento e modificação também pode ser usado em outros métodos de comunicação.
Ligação a elementos
No AngularJS, você pode obter a instância do controlador através de um elemento. Dessa forma, você pode obter rapidamente
Modifique os dados em um controlador ou chame os métodos neste controlador. por exemplo:
<div ng-controller = "AppController"> <div id = "div-a"> </div> </div>
Você pode obter a instância do controlador através dos seguintes métodos:
var instance = angular.Element (document.getElementById ('div-a')). Scope ();Em seguida, você pode usar esta instância para chamar o método do controlador para obter e modificar o valor. Não é possível obter com sucesso se o próprio elemento deve ter um controlador ou o elemento pai do elemento deve ter um controlador.
É tudo sobre compartilhamento de dados e comunicação entre controladores angulares. Amigos interessados no conhecimento de compartilhar dados no AngularJs podem aprender juntos. Obrigado pelo seu apoio ao wulin.com.