Explication détaillée des étapes pour implémenter la communication du contrôleur dans Angularjs

Cette fois, je vais vous apporter une explication détaillée des étapes de Angularjs mise en œuvre de la communication contrôleur Quelles sont les précautions pour la mise en œuvre de la communication du contrôleur dans Angularjs. . Voici des cas pratiques, jetons un coup d'œil.

Dans les projets de développement utilisant angulairejs, la communication entre les contrôleurs, comme le transfert de paramètres et 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. 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. Basé sur les événements 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, venez en savoir plus informations passionnantes Faites attention aux autres articles connexes sur le site Web chinois php !

Lecture recommandée :

Angular utilise ng-click pour télécharger plusieurs paramètres en même temps

Quelles sont les méthodes pour implémenter des lettres dans la conversion Angular Case

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!