本人学了一段时间的angular,angular之间怎样通信,我就总结以下几点,如果有哪位大神认为不对,敬请赐教。

1、父子之间的作用域进行通信

html

<div ng-controller="Parent">

  {{name}}                                //Parent
  <div ng-controller="child">
    {{name}}                          //Parent
  </div>
</div>

js

m1.controller("Parent",["$scope",function($scope){

  $scope.name = "Parent";
}])
m1.controller("child",["$scope",function($scope){

}])

2、$rootScope 挂在全局作用域上,适用范围更广

html

<div ng-controller="myCtrl">

  {{name}}                                  //Parent
  <div ng-controller="Parent">
    {{name}}                            //Parent
    <div ng-controller="child">
      {{name}}                      //Parent
    </div>
  </div>

</div>

js

m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
  $scope.name = "Parent";
  $rootScope.name = $scope.name;
}])
m1.controller("child",["$scope",function($scope){
}])

3、基于事件的数据传递  组件 webcomponent

html

<div ng-controller="Parent">

  <input type="text" ng-model="name" ng-change="change()">  
  <div ng-controller="child">
    <input type="text" ng-model="name" ng-change="change()">   
  </div>
  <div ng-controller="secChild">
    <input type="text" ng-model="name">
  </div>
</div>

js

m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){

  // 监听 发送消息  $emit
  $scope.$on("changeName",function(event,data){
    console.log(data);
    //$broadcast 广播 广播只有子级和自己知道,父级(就是Parent更上级)不知道
    $scope.$broadcast("sendName",data);
  })

  //监听 $broadcast 广播发送的消息

  $scope.$on("sendName",function(event,data){
    console.log(data);
    $scope.name = data;
   })
}])
m1.controller("child",["$scope",function($scope){
  $scope.name = "第一个孩子";
  $scope.change = function(){
    //$emit 发送 只能发送自己的父级
    $scope.$emit("changeName","发送-》广播");
  }

  //监听 $broadcast 广播发送的消息
   $scope.$on("sendName",function(event,data){
    console.log(data);
    $scope.name = data;
   })
}])
m1.controller("secChild",["$scope",function($scope){
  $scope.name = "第二个孩子";

  //监听 $broadcast 广播发送的消息
  $scope.$on("sendName",function(event,data){
    console.log(data);
    $scope.name = data;
  })
}])

总结:$emit 发送消息,只能发送给自己的父级或者更上级(如:爷爷级),使用监听($on(监听的名字,function(event,data){ }))就能收到,自己以及自己的子级都不能发送;

$broadcast 广播消息 ,只能被自己或是自己的子级所监听($on(监听的名字,function(event,data){ }))的到,父级或者更上级不能监听的到

4、service 没有作用域的概念

html

<body ng-controller="myCtrl">
  <input type="text" ng-model="name" >
  <div ng-controller="Parent">
    <input type="text" ng-model="name" >
    <div ng-controller="child">
      <input type="text" ng-model="name" ng-change="change()">
    </div>
    <div ng-controller="secChild">
      <input type="text" ng-model="name">
    </div>
  </div>
</body>

js

m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
}])
m1.controller("child",["$scope","myData",function($scope,myData){

  //为什么 $scope.name = myData.name;  不能使上面的联动改变呢

  //据我所知,我觉得 上面的 $scope.name 是赋值,物理地址也是一样的,就算html中<input>标签都有里面 ng-model="name",

   //这样是不会联动的,也就是说多个controller里面的物理地址不一样,

  //如果是引用myData$scope.data = myData; html中<input>标签都有里面 ng-model="name",只是引用其中的数据,其他

  //包括物理地址都不变,这样就可以联动
  $scope.data = myData;
}])
m1.controller("secChild",["$scope","myData",function($scope,myData){

  //为什么 $scope.name = myData.name;  不能使上面的联动改变呢
  $scope.data = myData;
}])
m1.factory("myData",function(){
  return{
    name : "123"
  }
})

总结:service与$emit、$broadcast、$on的区别,service没有作用域的概念;$emit、$broadcast、$on必须要清楚父子级以及作用域的范围。

angular的继承作用域通信的更多相关文章

  1. 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...

  2. 38.angular的scope作用域

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...

  3. angular组件间的通信(父子、不同组件的数据、方法的传递和调用)

    angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...

  4. 作用域通信对象:session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后,跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

  5. angular 控制器之间的通信

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  6. ionic准备之angular基础——继承(3)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 后端学 Angular 2 —— 组件间通信

    1. 父组件向子组件传递信息 使用@Input 子组件的属性用 @Input 进行修饰,在父组件的模板中绑定变量 例子: import { Component, OnInit, Input } fro ...

  8. javascript构造函数+原形继承+作用域扩充

    目前为止我认为这是最佳的声明对象的模式,将今天学到的东西写下 <script type="text/javascript"> function Constructor( ...

  9. angular.js之作用域scope'@','=','&'

    <!doctype html> <html ng-app='myApp'> <head> </head> <body> <script ...

随机推荐

  1. volatile关键字解析(二)

    volatile详解接下来,我们详细讲述一下volatile关键字volatile关键字具有两重语义 保证了不同线程对这个变量进行操作时的可见性,即一个线程修改了某个变量的值,这个新值对其他线程来说是 ...

  2. linux basename学习

    basename 用法 basename 名称 [后缀]   例子 1. $: basename /tmp/test.sh 输出: test.sh 2. $: basename /tmp/test.s ...

  3. WiFi无线网络参数 802.11a/b/g/n 详解

    转载自:WiFi无线网络参数 802.11a/b/g/n 详解 如转载侵犯您的版权,请联系:2378264731@qq.com 802.11a/b/g/n,其实指的是无线网络协议,细分为802.11a ...

  4. [置顶] 【机器学习PAI实践八】用机器学习算法评估学生考试成绩

    (本文数据为实验用例) 一.背景 母亲是老师反而会对孩子的学习成绩造成不利影响?能上网的家庭,孩子通常能取得较好的成绩?影响孩子成绩的最大因素居然是母亲的学历?本文通过机器挖掘算法和中学真实的学生数据 ...

  5. vue 之node.js 02

    文档 铺垫 以前网页制作web1.0 如今是web2.0-->交互式操作 前端工具 grunt gulp webpack :打包机 作用:将项目中的js,css,img,font,html等进行 ...

  6. Linux shell字符串截取与拼接

    一 Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.linuxidc.com/123.htm 1  # 号截取,删除左边字符,保留右边字符. echo ${va ...

  7. 迫不及待地体验了一把 C#8.0 中的可空引用类型(Nullable Reference)

    在我之前的一篇博客 NullReferenceException,就不应该存在! 中,我吐槽了 C# 中 null 的弊端以及避免 null 的方法:事实上这本都是现代高级语言中极力推崇的做法.Kot ...

  8. Hexo+GitHub+Netlify一站式搭建属于自己的博客网站

    喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...

  9. Oracle中用exp/imp命令快速导入导出数据

    from: http://blog.csdn.net/wangchunyu11155/article/details/53635602 [用 exp 数 据 导 出]: 1 将数据库TEST完全导出, ...

  10. A Corrupt Mayor's Performance Art

    Corrupt governors always find ways to get dirty money. Paint something, then sell the worthless pain ...