Résumé des exemples de méthodes de communication entre contrôleurs dans Angularjs

Cet article présente principalement les méthodes de communication entre les contrôleurs dans Angularjs. Il résume et analyse les méthodes de communication courantes des contrôleurs AngularJS et les précautions de fonctionnement associées sous forme d'exemples. Les amis dans le besoin peuvent se référer aux exemples de cet article

.

Décrit comment Angularjs implémente la communication entre les contrôleurs. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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. Diffusion basée sur des événements

La diffusion basée sur des événements nécessite l'utilisation de $emit(), $broadcaset() et $emit() ces trois méthodes.

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;
  });
 };
});

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Des exemples spécifiques à Jquery présentent quand utiliser AJAX et où AJAX doit être utilisé

jquery et PHP combiné avec un long sondage AJAX

Compréhension préliminaire de JavaScript, Ajax, jQuery et comparaison de la relation entre les trois

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!