Angularjs ermöglicht Controllern die Kommunikation untereinander (Code im Anhang)

Dieses Mal bringe ich Ihnen Angularjs, damit Controller miteinander kommunizieren können (mit Code), Angularjs, damit Controller miteinander kommunizieren können VorsichtsmaßnahmenWas sind Sie? Hier sind tatsächliche Fälle.

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. Die auf Angular-Diensten basierende Methode:

In Angular ist der Dienst ein Singleton Daher wird im Dienst ein Objekt generiert, das mithilfe von 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 untergeordnete Bereichshierarchie senden:

Anwendungsszenario: Wird vom übergeordneten Seitencontroller verwendet, um Parameter an den untergeordneten Seitencontroller oder denselben zu übergeben Zeit-Pass-Parameter zwischen Level-Controllern.

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:

jQuery implementiert das automatische Hinzufügen von Ellipsen, wenn der Eingabetext die angegebene Anzahl von Zeilen überschreitet

WeChat Applet-Sharing-Seite Springen Sie dann zurück zur Startseite

Das obige ist der detaillierte Inhalt vonAngularjs ermöglicht Controllern die Kommunikation untereinander (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!