Angularjs实现控制器之间通信方式实例总结


Posted in Javascript onMarch 27, 2018

本文实例讲述了Angularjs实现控制器之间通信方式。分享给大家供大家参考,具体如下:

利用angularjs开发项目中,控制器之间的通信,比如参数的传递,数据的传递,都是比较常见的。控制器之间的通信,显得尤为重要。常见的方式有如下两种:一、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程序设计有所帮助。

Javascript 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
Angular中使用better-scroll插件的方法
Mar 27 #Javascript
使用node打造自己的命令行工具方法教程
Mar 26 #Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 #Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 #Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 #Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 #Javascript
JS从非数组对象转数组的方法小结
Mar 26 #Javascript
You might like
PHP新手上路(五)
2006/10/09 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
Node.js中require的工作原理浅析
2014/06/24 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
js倒计时抢购实例
2015/12/20 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
深入讲解Python编程中的字符串
2015/10/14 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python五子棋游戏的设计与实现
2019/06/18 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
师范大学应届生求职信
2013/11/21 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
会员活动策划方案
2014/08/19 职场文书
个人存款证明书
2014/10/18 职场文书
财政局个人年终总结
2015/03/03 职场文书
2015年化验员工作总结
2015/04/10 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL
Redis唯一ID生成器的实现
2022/07/07 Redis
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android