AngularJS lui-même a fourni des méthodes telles que la directive et le service de service pour réaliser le partage et la réutilisation des données et du code. Cependant, dans le développement réel du projet, peut-être à cause de la paresse ou de la commodité, vous voudrez toujours communiquer directement le partage de données entre deux contrôleurs ou les fonctions et les méthodes d'appel. Ici, nous verrons quelles méthodes peuvent répondre à cette exigence.
Service singleton
Le service Singleton est une méthode de partage de données et de code prise en charge par AngularJS elle-même. Parce qu'il s'agit d'un singleton, tous les contrôleurs accèdent aux mêmes données. Par exemple, le service suivant peut être mis en œuvre:
Angular .Module ('app') .service ('ObjectService', [ObjectService]); fonction ObjectService () {var list = {}; return {get: function (id) {return list [id]; }, set: function (id, v) {list [id] = v; }};} Dans un contrôleur, les données définies par ObjectService.set('i', 1) peuvent être obtenues via ObjectService.get('i') dans d'autres contrôleurs.
Diffusion et événements
Dans AngularJS, les paramètres peuvent être passés lors du déclenchement des événements et de l'envoi d'émissions. Cette fonctionnalité peut être utilisée pour réaliser le partage de données. Il existe trois méthodes liées aux événements et aux émissions, à savoir:
1. $ emit (): événement déclencheur, il peut transmettre des données vers le haut, par exemple, le contrôleur enfant au contrôleur parent et le contrôleur du $ Rootscope
2. $ Broadcast (): Envoyez une diffusion, qui peut transmettre des données, par exemple, le contrôleur parent transmet des données au contrôleur enfant, ou $ Rootscope transmet des données à n'importe quel contrôleur
3. $ on (): écouter les événements et les émissions, et peut capturer $ émettre et $ diffuser
La communication entre les contrôleurs peut être divisée en trois situations:
1. Aucun contrôleur d'association directe: utilisez $ rootscope. $ Emit (), $ rootscope. $ Bowncast () ou $ scope. $ Émettre pour émettre des données et obtenir des données via $ rootscope. $ On ()
2 .
3 .
Voici les usages simples:
// One ControlErrangular .Module ('App') .Controller ('OneController', [$ Scope ', OneController]); fonction ONEController ($ Scope) {var Data = {Value:' Test '}; $ rootscope. $ Broadcast ('open.notice.editor', données);} // autre contrôleur .module ('app') .Controller ('' AnotherController ', [' $ Scope ', AnotherController]); fonction an autre $ scope.open (données); $ Scope. $ émit ('note.editor.opend');};}Contrôleur parent
Si les deux contrôleurs partagent ensemble le même contrôleur parent, le partage de données et la communication peuvent être effectués via le contrôleur parent. Par exemple:
<div ng-controller = "parentController"> <div ng-controller = "childOneController"> </div> <div ng-controlller = "childtwocontroller"> </div> </div>
// parent contrôleur angulaire .module ('app') .Controller ('ParentController', ['$ scope', parentController]); fonction parentController ($ scope) {// variable pour passer des données $ scope.data = null;} // childontroller. [$ Scope ', ChildOnEController]); fonction childOnEController ($ scope) {// Paramètres de données $ Scope. $ Parent.Data = 1;} // ChildController Angular .Module (' App ') .Controller (' ChildTwoController ', [' $ Scope ',' $ HimeOut ', ChildtwoController]); ChildTwoController ($ scope, $ timeout) {$ timeout (function () {// data read console.log ($ scope. $ Parent.data);}, 1000);}Variables globales ou partagées
AngularJS fournit l'encapsulation de deux variables, $ window et $ localstorage . En modifiant et en écoutant ces deux valeurs, le partage de données et la communication entre les contrôleurs peuvent être réalisés. La méthode est la suivante:
// One ControlErrangular .Module ('app') .Controller ('OneController', ['$ Scope', '$ window', OneController]); fonction ONEController ($ Scope, $ Window) {// Data Paraming Window.Data = 1;} // autre contrôleur. ['$ scope', AnotherController]); fonction autrementController ($ scope) {// écouter modifier $ scope. $ watch (function () {return $ window.data;}, function (n) {$ scope.windowdata = n;});};En fait, cette méthode de surveillance et de modification peut également être utilisée dans d'autres méthodes de communication.
Reliure élémentaire
Dans AngularJS, vous pouvez obtenir l'instance de contrôleur dessus via un élément. De cette façon, vous pouvez rapidement obtenir
Modifiez les données dans un contrôleur ou appelez les méthodes de ce contrôleur. Par exemple:
<div ng-controller = "AppController"> <div id = "div-a"> </div> </div>
Vous pouvez obtenir l'instance de contrôleur via les méthodes suivantes:
var instance = angular.element (document.getElementById ('div-a')). scope ();Ensuite, vous pouvez utiliser cette instance pour appeler la méthode du contrôleur pour obtenir et modifier la valeur. Il ne peut pas être possible d'obtenir avec succès si l'élément lui-même est lié à un contrôleur ou si l'élément parent de l'élément a forcément un contrôleur.
Il s'agit du partage de données et de la communication entre les contrôleurs angulaires. Les amis qui sont intéressés par la connaissance du partage des données dans AngularJS peuvent apprendre ensemble. Merci pour votre soutien à wulin.com.