Zusammenfassung von Beispielen für Kommunikationsmethoden zwischen Controllern in Angularjs

Dieser Artikel stellt hauptsächlich die Kommunikationsmethoden zwischen Angularjs-Controllern vor und analysiert sie in Form von Beispielen. Freunde in Not können sich auf die Beispiele in diesem Artikel beziehen

Beschreibt, wie Angularjs die Kommunikation zwischen Controllern implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

In Entwicklungsprojekten mit AngularJS ist die Kommunikation zwischen Controllern, wie 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. Ereignisbasierte Übertragung

Ereignisbasierte Übertragung erfordert die Verwendung von

, $emit() und $broadcaset()Diese drei Methoden. $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 hört das Broadcast-Ereignis 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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Jquery-spezifische Beispiele stellen vor, wann AJAX verwendet werden sollte und wo AJAX verwendet werden sollte

jquery und PHP kombiniert mit AJAX Long Polling

Vorläufiges Verständnis von JavaScript, Ajax, jQuery und Vergleich der Beziehung zwischen den drei

Das obige ist der detaillierte Inhalt vonZusammenfassung von Beispielen für Kommunikationsmethoden zwischen Controllern in Angularjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!