AngularJS开发教程之控制器之间的通信方法分析


Posted in Javascript onDecember 25, 2016

本文实例讲述了AngularJS开发教程之控制器之间的通信方法。分享给大家供大家参考,具体如下:

一、指令与控制器之间通信,无非是以下几种方法:

基于scope继承的方式

基于event传播的方式

service的方式(单例模式)

二、基于scope继承的方式:

最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child,Child 在 Parent 内,那Child 可以称为控制器Parent的子控制器,它将继承父控制器Parent的scope。这样,Child就可以访问到Parent的scope中的所有函数和变量了。

需要注意的是,由于scope的继承是基于Js的原型继承,如果变量是基本类型的,那在Child中的修改(写),有可能会导致Parent中的数据变脏。

例子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于scope继承的方式</title>
</head>
<body ng-app = "myApp">
  <div ng-controller = "parent">
      <p>引用类型:{{obj.value}}</p>
      <p>引用类型:{{value}}</p>
      <a href="javascript:;" ng-click = "parent('parent')">点我</a>
    <div ng-controller="child">
      <p>引用类型:{{obj.value}}</p>
      <p>引用类型:{{value}}</p>
      <a href="javascript:;" ng-click = "child('child')">点我</a>
    </div>
  </div>
  <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
  <script>
    var app = angular.module("myApp",[],function(){console.log("start")});
    app.controller("parent",function($scope){
      $scope.parent = function(newchild){
        // 这里不能都单独写成$scope.obj={value:newchild}
        $scope.obj={value:newchild};
        $scope.value = newchild;
      }
    });
    app.controller("child",function($scope){
      $scope.child = function(newchild){
        $scope.value = newchild;
        $scope.obj.value=newchild;
      }
    });
  </script>
</body>
</html>

三、基于事件的方式:

在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式 。基于事件的方式中我们可以里面作用的on,on,emit,boardcast这几个方式来实现,其中boardcast这几个方式来实现,其中on表示事件监听,emit表示向父级以上的作用域触发事件,emit表示向父级以上的作用域触发事件,boardcast表示向子级以下的作用域广播事件。

子到父 通过 $emit 注册事件,例子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于事件传播子到父</title>
</head>
<body ng-app = "myApp">
  <h3>$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件</h3>
  <div ng-controller = "parent">
      <p>引用类型:{{value}}</p>
    <div ng-controller="child">
      <a href="javascript:;" ng-click = "child('child')">子传值到父</a>
    </div>
  </div>
  <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
  <script>
    var app = angular.module("myApp",[],function(){console.log("start")});
    app.controller("parent",function($scope){
      $scope.$on("pfan",function(e,data){
        $scope.value = data;
      })
    });
    app.controller("child",function($scope){
      $scope.child = function(newchild){
        $scope.value = newchild;
        $scope.$emit("pfan",$scope.value)
      }
    });
  </script>
</body>
</html>

父到子通过$broadcast注册事件,但其实感觉有点多余,本事父就是可以共享给子的,例子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于事件传播父到子</title>
</head>
<body ng-app = "myApp">
  <h3>$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件</h3>
  基于事件传播父到子,这里本事父就可以到子,感觉有点多余
  <div ng-controller = "parent">
      <a href="javascript:;" ng-click = "parent('child')">子传值到父</a>
    <div ng-controller="child">
      <p>引用类型:{{value}}</p>
    </div>
  </div>
  <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
  <script>
    var app = angular.module("myApp",[],function(){console.log("start")});
    app.controller("parent",function($scope){
      $scope.parent = function(newchild){
        $scope.value = newchild;
        $scope.$broadcast("pfan",$scope.value)
      }
    });
    app.controller("child",function($scope){
      $scope.$on("pfan",function(e,data){
        $scope.value = data;
      })
    });
  </script>
</body>
</html>

同级之间

拥有同个父scope的子级scope之间,也就是兄弟/相邻scope之间的通信,其实是借助共同父级传递消息的:

子级scope中有谁想传消息了,emit一个给“奶爸”然后通过“奶爸”emit一个给“奶爸”然后通过“奶爸”broadcast 给所有孩子这个相同的信息,当然发出信息的那个可以选择是否要忽略掉自己发出的信息

四、angular服务的方式:

在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个控制器中获取到修改后的值:

var app = angular.module('myApp', []);
app.factory('instance', function(){
  return {};
});
app.controller('MainCtrl', function($scope, instance) {
 $scope.change = function() {
    instance.name = $scope.test;
 };
});
app.controller('sideCtrl', function($scope, instance) {
  $scope.add = function() {
    $scope.name = instance.name;
  };
});

html:

<div ng-controller="MainCtrl">
   <input type="text" ng-model="test" />
   <div ng-click="change()">click me</div>
</div>
<div ng-controller="sideCtrl">
  <div ng-click="add()">my name {{name}}</div>
</div>

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

Javascript 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 #Javascript
JavaScript中数据类型转换总结
Dec 25 #Javascript
javascript实现用户点击数量统计
Dec 25 #Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 #Javascript
js实现图片切换(动画版)
Dec 25 #Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 #Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 #Javascript
You might like
扩展你的 PHP 之入门篇
2006/12/04 PHP
php时间不正确的解决方法
2008/04/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python内置函数locals和globals对比
2020/04/28 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
单位绩效考核方案
2014/05/11 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
装修公司管理制度
2015/08/05 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书