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

 更新时间:2018年03月27日 10:43:25   作者:Web魔法师  
这篇文章主要介绍了Angularjs实现控制器之间通信方式,结合实例形式总结分析了AngularJS控制器常用通信方式及相关操作注意事项,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

  • angularjs的select使用及默认选中设置

    angularjs的select使用及默认选中设置

    本篇文章主要介绍了angularjs的select使用及默认选中设置,非常具有实用价值,需要的朋友可以参考下
    2017-04-04
  • 深究AngularJS中ng-drag、ng-drop的用法

    深究AngularJS中ng-drag、ng-drop的用法

    本篇文章主要介绍了深究AngularJS中ng-drag、ng-drop的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 详解angular2 控制视图的封装模式

    详解angular2 控制视图的封装模式

    这篇文章主要介绍了详解angular2 控制视图的封装模式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 将angular-ui的分页组件封装成指令的方法详解

    将angular-ui的分页组件封装成指令的方法详解

    这篇文章主要给大家介绍了将angular-ui的分页组件封装成指令的方法,文中介绍的非常详细,相信会对大家的学习或者工作觉有一定的参考价值,需要的朋友下面来一起看看吧。
    2017-05-05
  • AngularJS实现网站换肤实例

    AngularJS实现网站换肤实例

    这篇文章主要为大家详细介绍了AngularJS实现网站换肤的简单实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Angularjs使用directive自定义指令实现attribute继承的方法详解

    Angularjs使用directive自定义指令实现attribute继承的方法详解

    这篇文章主要介绍了Angularjs使用directive自定义指令实现attribute继承的方法,结合实例形式较为详细的分析了基于directive自定义指令实现attribute继承的具体步骤与相关技巧,需要的朋友可以参考下
    2016-08-08
  • angular2+node.js express打包部署的实战

    angular2+node.js express打包部署的实战

    本篇文章主要介绍了angular2+node.js express打包部署的实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 基于angular实现三级联动的生日插件

    基于angular实现三级联动的生日插件

    这篇文章主要为大家详细介绍了基于angular实现三级联动的生日插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Angular2生命周期钩子函数的详细介绍

    Angular2生命周期钩子函数的详细介绍

    这篇文章主要介绍了Angular2生命周期钩子函数的详细介绍,Angular提供组件生命周期钩子,可以让我们更好的开发Angular应用,有兴趣的可以了解一下
    2017-07-07
  • BootStrap+Angularjs+NgDialog实现模式对话框

    BootStrap+Angularjs+NgDialog实现模式对话框

    在完成一个后台管理系统时,需要用表格显示注册用户的信息。但是用户地址太长了,不好显示。所以想做一个模式对话框,点击详细地址按钮时,弹出对话框,显示地址。下面小编给大家分享下实现方法,一起看下吧
    2016-08-08

最新评论