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 相关文章推荐
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
使用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 执行系统命令的方法
2009/07/07 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
python创建n行m列数组示例
2019/12/02 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
教师职称自我鉴定
2014/02/12 职场文书
奥运会口号
2014/06/13 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
工作表现证明
2015/06/15 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书