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 相关文章推荐
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
基于vue-element组件实现音乐播放器功能
May 06 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
js通过循环多张图片实现动画效果
Dec 19 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上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
python 判断一个进程是否存在
2009/04/09 Python
Python自动连接ssh的方法
2015/03/07 Python
python写一个md5解密器示例
2018/02/23 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
python求质数列表的例子
2019/11/24 Python
使用Python实现音频双通道分离
2020/12/25 Python
python中常用的数据结构介绍
2021/01/12 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
Nike瑞士官网:Nike CH
2021/01/18 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
大明湖导游词
2015/02/03 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书