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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
jQuery事件用法详解
Oct 06 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
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通过COM类调用组件的实现代码
2012/01/11 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
Jquery ui css framework
2010/06/28 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
js中有关IE版本检测
2012/01/04 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python设计模式之观察者模式实例
2014/04/26 Python
Python 的 with 语句详解
2014/06/13 Python
Python中的闭包实例详解
2014/08/29 Python
Python中内建函数的简单用法说明
2016/05/05 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
中国电视购物:快乐购
2017/02/04 全球购物
2014超市双十一活动策划方案
2014/09/29 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
《检阅》教学反思
2016/02/22 职场文书