Angularjs實現(xiàn)控制器之間通信方式實例總結(jié)

更新時間：2018年03月27日 10:43:25 作者：Web魔法師

這篇文章主要介紹了Angularjs實現(xiàn)控制器之間通信方式,結(jié)合實例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項,需要的朋友可以參考下

本文實例講述了Angularjs實現(xiàn)控制器之間通信方式。分享給大家供大家參考，具體如下：

利用angularjs開發(fā)項目中，控制器之間的通信，比如參數(shù)的傳遞，數(shù)據(jù)的傳遞，都是比較常見的?？刂破髦g的通信，顯得尤為重要。常見的方式有如下兩種：一、angular服務的方式；二、基于事件廣播的方式；另外，還有基于作用域繼承的方式。下面先說一下前兩種方式：

一、基于angular服務的方式：

在angular中服務是一個單例，所以在服務中生成一個對象，該對象就可以利用依賴注入的方式在所有的控制器中共享。參照以下例子，在一個控制器修改了服務對象的值，在另一個控制器中獲取到修改后的值：

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; //將第一個控制器中為服務對象賦的值傳給第二個控制器
 };
});

<div ng-controller='Ctrltest1'>
  <input type="text" ng-model="test" />
  <div ng-click="change()">click me</div>
</div>
<div ng-controller='Ctrltest2'>
 <div ng-click="add()">my name {{name}}</div>
</div>

二、基于事件廣播的方式

基于事件廣播，需要用到$emit()、$broadcaset()和$emit()這三個方法。

1. 向父作用域?qū)哟谓Y(jié)構(gòu)發(fā)出自定義事件：使用$emit()方法，scope.$emit(name,[args,...])

注：name是事件名，args 是0個或多個參數(shù)。

應用場景：用于子頁面控制器向父頁面的控制器傳遞參數(shù)。

2. 向子作用域?qū)哟谓Y(jié)構(gòu)廣播自定義事件：

應用場景：用于父頁面控制器向子頁面的控制器傳遞參數(shù)或者同級控制器之間傳遞參數(shù)。

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

注：name是事件名，args 是0個或多個參數(shù).

3. 使用偵聽器處理自定義事件

為了處理發(fā)出或廣播的事件，可以使用$on()方法。$on()方法將使用下面的語法：

$scope.$on(name,listener)

注：name 是將要偵聽的事件的名字，listener參數(shù)是一個函數(shù)，它將接受事件作為第一個參數(shù)，接受$emit()或者$broadcaset()方法傳遞的其他所有參數(shù)作為隨后的參數(shù)。$on()方法主要用于監(jiān)聽$emit()和$broadcaset()方法中事件的變化，例如這兩個方法中如果有變量發(fā)生改變，$on()方法將會獲取到該變量的改變。

參照以下例子，在一個控制器修改了變量的值，在另一個控制器中會偵聽到修改后的值，并根據(jù)修改后的值，做出響應。

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

第二個控制器中監(jiān)聽第一個控制器中的廣播事件：

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; //監(jiān)聽到$scope.versionid值的變化。然后調(diào)用 $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;
  });
 };
});

關(guān)于Angularjs控制器之間通信方式，暫且總結(jié)到此，歡迎大家批評指正交流！

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章: