찾다

집  >  기사  >  웹 프론트엔드  >  Angularjs의 컨트롤러 간 통신 방법 예 요약

Angularjs의 컨트롤러 간 통신 방법 예 요약

亚连
亚连원래의
2018-05-28 17:21:261575검색

이 글은 AngularJS에서 구현한 컨트롤러 간의 통신 방식을 주로 소개하고 있으며, AngularJS 컨트롤러의 일반적인 통신 방식과 관련 동작 주의사항을 예시 형태로 요약 분석하였습니다. Angularjs의 컨트롤러 구현. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

Angularjs를 사용하는 개발 프로젝트에서는 매개변수 및 데이터 전송과 같은 컨트롤러 간의 통신이 비교적 일반적입니다. 컨트롤러 간의 통신은 특히 중요합니다. 두 가지 일반적인 방법이 있습니다. 첫째, 각도 서비스 방식, 둘째, 이벤트 브로드캐스팅 기반 방식, 범위 상속 기반 방식도 있습니다. 처음 두 가지 방법에 대해 먼저 이야기해 보겠습니다.

1. 각도 서비스 기반 방법: 각도에서는 서비스가 싱글톤이므로 서비스에서 개체가 생성되고 개체는 종속성 주입을 사용할 수 있습니다. 메소드는 모든 컨트롤러에서 공유됩니다. 다음 예를 참조하면 한 컨트롤러에서 서비스 객체의 값이 수정되고 다른 컨트롤러에서 수정된 값을 얻습니다. 

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. 이벤트 브로드캐스트 기반 방법 이벤트 방송을 기반으로 $emit(), $broadcaset() 및 $emit() 세 가지 메서드를 사용해야 합니다. .

1. 상위 범위 계층 구조로 사용자 정의 이벤트를 내보냅니다. $emit() 메서드, scope.$emit(name,[args,...])를 사용합니다. $emit()、$broadcaset()和$emit()这三个方法。

1. 向父作用域层次结构发出自定义事件：使用$emit()方法，scope.$emit(name,[args,...])

注：name是事件名，args 是0个或多个参数。

应用场景：用于子页面控制器向父页面的控制器传递参数。

2. 向子作用域层次结构广播自定义事件：

应用场景：用于父页面控制器向子页面的控制器传递参数或者同级控制器之间传递参数。

使用$broadcaset()方法，$scope.$broadcaset(name,[args,...])

注：name是事件名，args 是0个或多个参数.

3. 使用侦听器处理自定义事件

为了处理发出或广播的事件，可以使用$on()方法。$on()方法将使用下面的语法：

$scope.$on(name,listener)

注：name 是将要侦听的事件的名字，listener参数是一个函数，它将接受事件作为第一个参数，接受$emit()或者$broadcaset()方法传递的其他所有参数作为随后的参数。$on()方法主要用于监听$emit()和$broadcaset()

참고:

name은 이벤트 이름이고 args는 0개 이상의 매개변수입니다.

응용 시나리오:

하위 페이지 컨트롤러에서 상위 페이지 컨트롤러로 매개변수를 전달하는 데 사용됩니다.

2. 하위 범위 계층 구조에 사용자 정의 이벤트 방송:

응용 시나리오:

상위 페이지 컨트롤러가 하위 페이지 컨트롤러에 매개변수를 전달하거나 형제 컨트롤러 간에 매개변수를 전달하는 데 사용됩니다.

$broadcaset() 메서드인 $scope.$broadcaset(name,[args,...])를 사용하세요.

참고: name은 이벤트입니다. name, args는 0개 이상의 매개변수입니다.
3. 리스너를 사용하여 맞춤 이벤트를 처리하세요

방출되거나 브로드캐스트된 이벤트를 처리하려면 $on() 메서드를 사용할 수 있습니다. $on() 메서드는 다음 구문을 사용합니다: $scope.$on(name,listener)

참고: name은 이벤트입니다. 이름을 들을 수 있는 경우, 리스너 매개변수는 이벤트를 첫 번째 매개변수로 받아들이고 $emit() 또는 $broadcaset()에 의해 전달된 다른 모든 매개변수를 받아들이는 함수입니다. > 메소드를 후속 매개변수로 사용합니다. $on() 메서드는 주로 $emit() 및 $broadcaset() 메서드에서 이벤트의 변경 사항을 모니터링하는 데 사용됩니다. 이 두 가지 방법 변수가 변경되면 $on() 메서드는 변수의 변경 사항을 가져옵니다.
다음 예를 참고하세요. 한 컨트롤러에서 변수의 값을 수정하면 수정된 값이 다른 컨트롤러에서 들리고 수정된 값에 따라 응답합니다. 

app.controller(&#39;versiontaskCtrl&#39;, function WriteTestcaseCtrl($scope, $cookies, $rootScope, $modal, $stateParams, ui, searchVariable, currentuserversions,) {
 $scope.taskId = $cookies[&#39;edit_taskId&#39;];
 $scope.versionid = parseInt($cookies[&#39;edit_versionId&#39;]);
 $scope.versionName = $cookies[&#39;edit_versionName&#39;];
 $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(&#39;versionidChange&#39;, $scope.versionid); //向其他控制器广播$scope.versionid值的变化。
 };
 reload();
});

두 번째 컨트롤러는 첫 번째 컨트롤러에서 브로드캐스트 이벤트를 수신합니다.

🎜🎜
app.controller(&#39;SchemeTaskEditableRowCtrl&#39;, function ($scope, $rootScope, $cookies, $filter, $http, $window, $stateParams, basetasksService, schemetasksService, UserService) {
 $scope.taskId = $cookies[&#39;edit_taskId&#39;];
 $scope.versionid = $cookies[&#39;edit_versionId&#39;];
 $scope.version = $scope.versionid;
 var userid = $rootScope.user.userid;
 $scope.schemetask = [];
 $scope.basetask = [];
 $scope.result = [];
 $scope.$on(&#39;versionidChange&#39;, 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[&#39;director&#39;] = "app.writetestitem" + "({taskid:" + item.id + "})";
    item[&#39;number&#39;] = 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 = {&#39;name&#39;: item.name, &#39;number&#39;: item.number};
    $scope.names.push(itemname);
   });
   $scope.selected = $scope.users;
  });
 };
});
🎜🎜🎜위 내용은 나중에 모두에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜Jquery의 구체적인 예는 AJAX를 사용해야 하는 시기와 AJAX를 사용해야 하는 위치를 소개합니다.🎜🎜🎜🎜🎜jquery는 PHP와 결합하여 AJAX 긴 폴링을 구현합니다.🎜🎜🎜🎜🎜JavaScript, Ajax, jQuery에 대한 사전 이해 , 그리고 세 사람의 관계를 비교해 보세요🎜🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 Angularjs의 컨트롤러 간 통신 방법 예 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript 코드는 txt 파일의 업로드 미리보기 기능을 구현합니다.다음 기사：JavaScript 코드는 txt 파일의 업로드 미리보기 기능을 구현합니다.

관련 기사

더보기