Detaillierte Erläuterung der gegenseitigen Kommunikationsfunktion zwischen Controllern in Angularjs

Dieses Mal werde ich Ihnen die gegenseitige Kommunikationsfunktion von Angularjs ausführlich erläutern. Welche Vorsichtsmaßnahmen müssen Angularjs treffen, damit die Controller miteinander kommunizieren? Das Folgende ist ein praktischer Fall.

In Entwicklungsprojekten mit AngularJS ist die Kommunikation zwischen Controllern, beispielsweise die Übertragung von Parametern und Daten, relativ häufig. Besonders wichtig ist die Kommunikation zwischen den Controllern. Es gibt zwei gängige Methoden: erstens die Angular-Service-Methode, zweitens die auf Event-Broadcasting basierende Methode; Lassen Sie uns zunächst über die ersten beiden Methoden sprechen:

1. Methode basierend auf Angular-Service:

In Angular ist der Service ein Singleton. Daher wird im Dienst ein Objekt generiert, das mithilfe der Abhängigkeitsinjektion von allen Controllern gemeinsam genutzt werden kann. Sehen Sie sich das folgende Beispiel an: Der Wert des Dienstobjekts wird in einem Controller geändert und der geänderte Wert wird in einem anderen Controller abgerufen:

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. Methode basierend auf Ereignisübertragung

Basierend auf der Übertragung von Ereignissen werden die drei Methoden $emit(), $broadcaset() und $emit() benötigt.

1. Benutzerdefinierte Ereignisse an die übergeordnete Bereichshierarchie senden: Verwenden Sie die Methode $emit()scope.$emit(name,[args,...])

Hinweis: name ist der Ereignisname, args ist 0 einen oder mehrere Parameter.

Anwendungsszenario: Wird vom untergeordneten Seitencontroller verwendet, um Parameter an den übergeordneten Seitencontroller zu übergeben.

2. Benutzerdefinierte Ereignisse an die Unterbereichshierarchie senden:

Anwendungsszenario: Wird vom übergeordneten Seitencontroller verwendet, um Parameter an den untergeordneten Seitencontroller zu übergeben Gleichzeitig werden Parameter zwischen Level-Controllern übergeben.

Verwenden Sie die

-Methode, $broadcaset()$scope.$broadcaset(name,[args,...])

Hinweis: name ist der Ereignisname, args ist 0 oder mehr Parameter.

3 . Benutzerdefinierte Ereignisse mithilfe von Listenern verarbeiten

Um ausgegebene oder gesendete Ereignisse zu verarbeiten, können Sie die Methode

verwenden. Die $on()-Methode verwendet die folgende Syntax: $on()

$scope.$on(name,listener)

Hinweis: name ist der Name des abzuhörenden Ereignisses und der Listener-Parameter ist eine Funktion, die das Ereignis als ersten Parameter und alle anderen von der Methode oder $emit() übergebenen Parameter als nachfolgende Parameter akzeptiert. Die Methode $broadcaset() wird hauptsächlich zur Überwachung von Ereignisänderungen in den Methoden $on() und $emit() verwendet. Wenn sich beispielsweise eine Variable in diesen beiden Methoden ändert, erhält die Methode $on() die Änderung der Variablen. $broadcaset()

Siehe folgendes Beispiel: Wenn der Wert einer Variablen in einem Controller geändert wird, wird der geänderte Wert in einem anderen Controller gehört und entsprechend dem geänderten Wert reagiert.

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

Der zweite Controller überwacht das Sendeereignis im ersten Controller:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier php Chinesische Website Andere verwandte Artikel!

Empfohlene Lektüre:

HTML-String in HTML-Tag konvertieren und verwenden

So ändern Sie die Struktur von new() in js Der Rückgabewert der Funktion und dieser Punkt auf

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der gegenseitigen Kommunikationsfunktion zwischen Controllern in Angularjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!