Explication détaillée de la fonction de communication mutuelle entre les contrôleurs dans Angularjs

Cette fois, je vais vous apporter une explication détaillée de la fonction de communication mutuelle d'Angularjs. Quelles sont les précautions à prendre par Angularjs pour faire communiquer les contrôleurs entre eux. Voici un cas pratique, jetons un coup d'oeil.

Dans les projets de développement Angularjs, la communication entre les contrôleurs, telle que le transfert de paramètres et le transfert de données, est relativement courante. La communication entre les contrôleurs est particulièrement importante. Il existe deux méthodes courantes : premièrement, la méthode du service angulaire ; deuxièmement, la méthode basée sur la diffusion d'événements. En outre, il existe également la méthode basée sur l'héritage de portée ; Parlons d'abord des deux premières méthodes :

1. La méthode basée sur le service angulaire :

En angulaire, le service est un singleton Par conséquent, un objet est généré dans le service et l'objet peut être partagé entre tous les contrôleurs à l'aide de l'injection de dépendances. Reportez-vous à l'exemple suivant, la valeur de l'objet de service est modifiée dans un contrôleur, et la valeur modifiée est obtenue dans un autre contrôleur :

var app = angular.module('myApp', []);
app.factory('Myservice', function(){
 return {};
});
//定义服务
app.controller('Ctrltest1', function($scope, 'Myservice') {
 $scope.change = function() {
  Myservice.name = $scope.test; //在第一个控制器中为服务对象赋值
 };
});
app.controller('Ctrltst2', function($scope, 'Myservice') {
 $scope.add = function() {
  $scope.name = Myservice.name; //将第一个控制器中为服务对象赋的值传给第二个控制器
 };
});

<p ng-controller=&#39;Ctrltest1&#39;>
  <input type="text" ng-model="test" />
  <p ng-click="change()">click me</p>
</p>
<p ng-controller=&#39;Ctrltest2&#39;>
 <p ng-click="add()">my name {{name}}</p>
</p>

2. Événement- basé La méthode de diffusion

est basée sur la diffusion d'événements et nécessite l'utilisation de trois méthodes : $emit(), $broadcaset() et $emit().

1. Émettez des événements personnalisés à la hiérarchie de portée parent : utilisez la méthode $emit(), scope.$emit(name,[args,...])

Remarque : name est le nom de l'événement, args est 0. un ou plusieurs paramètres.

Scénario d'application : Utilisé par le contrôleur de page enfant pour transmettre des paramètres au contrôleur de page parent.

2. Diffusez des événements personnalisés vers la hiérarchie de sous-portée :

Scénario d'application : Utilisé par le contrôleur de page parent pour transmettre des paramètres au contrôleur de page enfant ou au niveau du contrôleur de page enfant. En même temps, transmettez les paramètres entre les contrôleurs de niveau.

Utilisez la méthode $broadcaset(), $scope.$broadcaset(name,[args,...])

Remarque : name est le nom de l'événement, args est 0 ou plusieurs paramètres.

3 . Gérer les événements personnalisés à l'aide d'écouteurs

Pour gérer les événements émis ou diffusés, vous pouvez utiliser la méthode $on(). La méthode $on() utilisera la syntaxe suivante :

$scope.$on(name,listener)

Remarque : name est le nom de l'événement à écouter, et le paramètre d'écoute est une fonction qui acceptera l'événement comme premier paramètre, et tout autre paramètre passé par la méthode $emit() ou $broadcaset() comme paramètres suivants. La méthode $on() est principalement utilisée pour surveiller les changements d'événements dans les méthodes $emit() et $broadcaset(). Par exemple, si une variable change dans ces deux méthodes, la méthode $on() obtiendra le changement de la variable.

Référez-vous à l'exemple suivant. Si la valeur d'une variable est modifiée dans un contrôleur, la valeur modifiée sera entendue dans un autre contrôleur et répondra en fonction de la valeur modifiée.

app.controller('versiontaskCtrl', function WriteTestcaseCtrl($scope, $cookies, $rootScope, $modal, $stateParams, ui, searchVariable, currentuserversions,) {
 $scope.taskId = $cookies['edit_taskId'];
 $scope.versionid = parseInt($cookies['edit_versionId']);
 $scope.versionName = $cookies['edit_versionName'];
 $scope.version = $scope.versionid;
 getuserversions = function () {
  currentuserversions.get(function (res) {
   $scope.versions = res;
  });
 };
 reload = function () {
  getuserversions();
 };
 $scope.changeVersionid = function (v) {
  console.log(v);
  $scope.$broadcast('versionidChange', $scope.versionid); //向其他控制器广播$scope.versionid值的变化。
 };
 reload();
});

Le deuxième contrôleur écoute l'événement diffusé dans le premier contrôleur :

app.controller('SchemeTaskEditableRowCtrl', function ($scope, $rootScope, $cookies, $filter, $http, $window, $stateParams, basetasksService, schemetasksService, UserService) {
 $scope.taskId = $cookies['edit_taskId'];
 $scope.versionid = $cookies['edit_versionId'];
 $scope.version = $scope.versionid;
 var userid = $rootScope.user.userid;
 $scope.schemetask = [];
 $scope.basetask = [];
 $scope.result = [];
 $scope.$on('versionidChange', function (event, versionid) {
  $scope.versionid = versionid; //监听到$scope.versionid值的变化。然后调用 $scope.schemeTask()和$scope.getUsers()这两个方法
  $scope.schemeTask();
  $scope.getUsers();
 });
 $scope.schemeTask = function () {
  $scope.tasks = [];
  $scope.schemetask = [];
  schemetasksService.get({version: $scope.versionid}, function (res) {
   $scope.schemetask_collection = res.results;
   //console.log($scope.schemetask_collection);
   $scope.schemetask_displayed = [].concat($scope.schemetask_collection);
   var i = 1;
   angular.forEach($scope.schemetask_collection, function (item) {
    item['director'] = "app.writetestitem" + "({taskid:" + item.id + "})";
    item['number'] = i;
    i++;
    $scope.schemetask.push(item);
   });
   $scope.tasks = $scope.schemetask;
  });
 };
 $scope.getUsers = function () {
  UserService.get(function (res) {
   $scope.users = res.results;
   $scope.usersDisplayed = [].concat($scope.users);
   $scope.itemArray = [];
   $scope.userArray = [];
   $scope.names = [];
   angular.forEach($scope.users, function (item) {
    $scope.itemArray.push(item);
    $scope.userArray.push(item.name + item.number);
    var itemname = {'name': item.name, 'number': item.number};
    $scope.names.push(itemname);
   });
   $scope.selected = $scope.users;
  });
 };
});

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez venir pour en savoir plus. informations passionnantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Convertir la chaîne HTML en balise HTML et utiliser

Comment changer la structure de new() en js La fonction renvoie la valeur et ce point vers

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!