Contrôleur de contrôleur AngularJS méthode de communication correcte_AngularJS

AngularJS est un framework MVC frontal très puissant. Le contrôleur dans AngularJS est une fonction qui est utilisée pour ajouter des fonctions supplémentaires à la portée de la vue ($scope) Nous l'utilisons pour définir l'état initial de la portée. objet et ajouter un comportement personnalisé.

Lorsque nous créons un nouveau contrôleur, angulaireJS nous aidera à générer et à transmettre un nouvel objet $scope à ce contrôleur. Dans n'importe quelle partie de l'application angulaireJS, il existe une portée parent, de niveau supérieur. C'est le niveau où ng-. app est localisé et sa portée parent est $rootScope.

$root de chaque $scope pointe vers $rootScope et $cope.$parent pointe vers la portée parent.

La communication entre les contrôleurs correspond essentiellement à la manière dont le $scope où se trouve le contrôleur actuel communique avec les $scopes des autres contrôleurs.

Il existe généralement 3 solutions :

En utilisant le principe de l'héritage de portée, le contrôleur enfant accède au contenu du contrôleur parent. Utilisez les événements dans AngularJS, c'est-à-dire utilisez $on, $emit, $broadcast pour la livraison des messages. Utilisez les services dans AngularJS
. La première façon

C'est-à-dire que les étendues sont imbriquées dans les étendues. Il existe certaines restrictions d'utilisation et les étendues doivent être imbriquées. Dans le développement réel, ce scénario est relativement rare, mais ce n'est pas impossible.

Par défaut dans angulaireJS, lorsqu'une propriété est introuvable dans la portée actuelle, elle sera recherchée dans la portée parent. Si elle est introuvable, elle sera recherchée jusqu'à ce que $rootScope soit trouvé. S'il est introuvable dans $rootScope, le programme s'exécutera toujours, mais la vue ne sera pas mise à jour.

Exemple

javascript

//Javascript
app.controller('ParentController', function($scope) { 
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
//result
{"greeted":true, "name": "Ari Lerner"}

La deuxième voie

Les étendues étant hiérarchiques, les chaînes de portées peuvent être utilisées pour transmettre des événements.

Il existe deux manières de diffuser des événements : * $broadcast : L'événement déclenché doit être propagé vers le bas pour notifier l'ensemble du système d'événements (permettant à n'importe quelle portée de gérer cet événement). * $emit : Si vous souhaitez rappeler un module global, vous devez transmettre l'événement vers le haut lorsque vous devez notifier une portée de niveau supérieur (telle que $rootscope).

Utilisez $on sur la portée pour la surveillance des événements.

Exemple

JavaScript

app.controller('ParentController', function($scope) { 
$scope.$on('$fromSubControllerClick', function(e,data){
console.log(data); // hello
});
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.$emit('$fromSubControllerClick','hello');
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
</div>

Un autre problème dont je souhaite parler ici est le problème de performances de la propagation des événements. Si $broadcast $on est utilisé pour notifier toutes les sous-portées, il y aura des problèmes de performances ici, il est donc recommandé d'utiliser $emit $on. Afin d'améliorer encore les performances, la fonction de gestion des événements définie doit être libérée ensemble lorsque la portée est détruite.

L'utilisation de $emit $on nous oblige à lier l'écouteur d'événement à $rootScope, par exemple :

JavaScript

angular
.module('MyApp')
.controller('MyController', ['$scope', '$rootScope', function MyController($scope, $rootScope) {
var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){
console.log('foo');
});
$scope.$on('$destroy', unbind);
}
]);

Mais cette méthode est un peu lourde, et elle me met mal à l'aise lors de la définition de plusieurs fonctions de gestion d'événements, alors améliorons-la

Utilisez un décorateur pour définir une nouvelle fonction de liaison d'événement :

JavaScript

angular
.module('MyApp')
.config(['$provide', function($provide){
$provide.decorator('$rootScope', ['$delegate', function($delegate){
Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
value: function(name, listener){
var unsubscribe = $delegate.$on(name, listener);
this.$on('$destroy', unsubscribe);
return unsubscribe;
},
enumerable: false
});
return $delegate;
}]);
}]);

Puis quand on définit la fonction de gestionnaire d'événements dans le contrôleur :

JavaScript

angular
.module('MyApp')
.controller('MyController', ['$scope', function MyController($scope) {
$scope.$onRootScope('someComponent.someCrazyEvent', function(){
console.log('foo');
});
}
]); 

Je recommande fortement cette approche

La troisième voie

En utilisant les caractéristiques du mode singleton de service dans angulaireJS, le service (service) fournit un moyen de conserver les données tout au long du cycle de vie de l'application, de communiquer entre les contrôleurs et d'assurer la cohérence des données.

Généralement, nous encapsulons le serveur pour fournir une interface permettant aux applications d'accéder aux données ou d'interagir avec les données à distance.

Exemple

JavaScript

var myApp = angular.module("myApp", []);
myApp.factory('Data', function() {
return {
name: "Ting"
}
});
myApp.controller('FirstCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Jack";
}
});
myApp.controller('SecondCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Moby";
}
});

Ce qui précède est la méthode de communication correcte pour le contrôleur AngularJS. J'espère que cela pourra aider tout le monde.