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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
javascript的push使用指南
Dec 05 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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脚本的10个技巧(4)
2006/10/09 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
Java File类的常用方法总结
2015/03/18 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
详解如何运行vue项目
2019/04/15 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
详解python深浅拷贝区别
2019/06/24 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
生产部经理岗位职责
2013/12/16 职场文书
倡议书范文
2014/04/16 职场文书
邀请书格式范文
2015/02/02 职场文书
情人节活动总结范文
2015/02/05 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
python - asyncio异步编程
2021/04/06 Python
Python import模块的缓存问题解决方案
2021/06/02 Python