Detaillierte Erläuterung der Schritte zur Implementierung der Controller-Kommunikation in Angularjs

Dieses Mal werde ich Ihnen die Schritte zur Implementierung der Controller-Kommunikation in Angularjs ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Implementierung der Controller-Kommunikation in Angularjs? sind praktische Fälle, werfen wir einen Blick darauf.

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 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() und $broadcaset() benötigt. $emit()

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 Controller der übergeordneten Seite verwendet, um Parameter an den Controller der untergeordneten Seite oder am 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

-Methode verwendet die folgende Syntax: $on()$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 übergebenen Parameter als nachfolgende Parameter akzeptiert. Die Methode $emit() wird hauptsächlich zur Überwachung von Ereignisänderungen in den Methoden $broadcaset() und $on() verwendet. Wenn sich beispielsweise eine Variable in diesen beiden Methoden ändert, erhält die Methode $on() die Änderung der Variablen. $emit()$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:

Angular verwendet ng-click, um mehrere Parameter gleichzeitig hochzuladen

Welche Möglichkeiten gibt es? um Buchstaben bei der Konvertierung von Winkelbuchstaben zu implementieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung der Controller-Kommunikation in Angularjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!