本文實例講述了Angularjs實現控制器之間通信方式。分享給大家供大家參考,具體如下:
利用angularjs開發項目中,控制器之間的通信,比如參數的傳遞,數據的傳遞,都是比較常見的??刂破髦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. 向父作用域層次結構發出自定義事件:使用$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()方法中事件的變化,例如這兩個方法中如果有變量發生改變,$on()方法將會獲取到該變量的改變。
參照以下例子,在一個控制器修改了變量的值,在另一個控制器中會偵聽到修改后的值,并根據修改后的值,做出響應。
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();});第二個控制器中監聽第一個控制器中的廣播事件:
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; }); };});關于Angularjs控制器之間通信方式,暫且總結到此,歡迎大家批評指正交流!
更多關于AngularJS相關內容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答