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 相关文章推荐
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
微信小程序之 catalog 切换实现解析
Sep 12 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
PHP个人网站架设连环讲(一)
2006/10/09 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
python实现猜单词游戏
2020/05/22 Python
python字符串的index和find的区别详解
2020/06/20 Python
Python通过format函数格式化显示值
2020/10/17 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
教师个人自我剖析材料
2014/09/29 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis