先引入

设置meta元素

http://blog.sina.com.cn/s/blog_51048da70101cgea.html

　　//设置 虚拟窗口的大小等于设备的大小

　　<meta name="viewport" content="width=device-width, user-scalable=no,init-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">

　　//格式检测

　　 <meta name="format-detection" content="telephone=no">
   　　 <meta name="format-detection" content="email=no">

　　//引用 angular.min.js

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

//代码如下

<!doctype html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>控制器间的通信</title>
</head>
<body>
    <div ng-controller="main">
        main controller
        <div ng-controller="child">
            child controller
        </div>
        <button ng-click="broadcast()">$broadCast</button>
    </div>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">

var myapp=angular.module("myapp",[]);
        myapp.controller("main",function($scope,$rootScope){
            var name = "var main->child";
            $scope.name="main";
            $rootScope.age = 18;  //ng-app  全局

//父级发送接收信息事件   
            $scope.$on("childData",function(e,d){   //event事件  data数据

console.log(e.targetScope)   //获得子控件的 $scope
            })
            $scope.broadcast=function(){
                $scope.$broadcast("mainData",name)
            }

})
        myapp.controller("child",function($scope,$rootScope){  //$scope  作用域
            var name = "var name->child";
            $scope.name="child";
            console.log($rootScope) // 18

//子级控件 收发信息事件
            $scope.$on("mainData",function(e,d){
                console.log(d)
            })
            $scope.$emit("childData","发送给父控件")

})

</script>
</body>
</html>

//访问不同作用域的变量
//方法一
//知识点： $scope是当前controller控制器下的作用域
        //  $rootScrope  ng-app  下的作用域
//方法二
//  $on 监听事件     $emit子控件向父控件发送事件    $broadcast 向子控件发送信息时需谨慎(所有的子控件都可以收到)

//e.targetScope  获得事件发送的主体scope作用域

　　

angular 控件间的通信的更多相关文章

  1. Android各组件/控件间通信利器之EventBus

    实际项目开发过程中,经常遇到如下场景:不同的应用程序组件的控件间具有一定的相互关联性,其中用户对后者进行的某种操作会引起前者的相应改变.举一个具体的场景:以糗事百科为例,在糗事列表页和详情页页,对于每 ...

  2. [WPF]获取控件间的相对位置

    原文:[WPF]获取控件间的相对位置 [WPF]获取控件间的相对位置                             周银辉 我们知道WPF有着比较灵活的布局方式,关于某个控件的坐标,Canv ...

  3. qt 布局管理按钮控件间有空隙？

    定义了几个按钮控件,想要按钮间没有空隙,我使用setspaces(0)来设置它们之间的间隔. 结果控件间还是有空隙,如图 我对控件所在的widget的背景进行设置,(会把style传到子控件)发现结果 ...

  4. TableView 中cell间的分割线（及其他控件间（内）的分割线）设置

    知识点: 1.在应用开发中,tableView中自带的分割线满足不了开发需求: 2.一些子空间中添加一些类似于分割线一样的东西等······ 补充知识点:导航条左侧或右侧的控件尽量靠近屏幕边缘设置 需 ...

  5. WPF 实现控件间拖拽内容

    想实现这样一个常用功能:在ListBox的一个Item上点住左键,然后拖拽到另外一个控件(如ListView中),松开左键,数据已经拖拽过来. 步骤如下: 1. 设置ListBox 的AllowDro ...

  6. VB控件间的拖放

    新建工程,放置控件Picture1,Text1,Text2,复制下面的代码运行 Text1和Text2可以互相拖放,也可以将Picture1拖放给Text1,Text2. Private Sub Fo ...

  7. 在VC++中怎样改变控件间的TAB切换顺序？

    在编辑界面按下ctrl+D键,就会出现所有控件的Tab键顺序,按照自己想要的顺序依次点击控件,就可以重新安排顺序.

  8. 在ListBox控件间交换数据

    实现效果: 知识运用: ListBox控件的SelectedItem属性 //获取或设置ListBox控件中当前选定的数据项 public Object SelectedItem{ get;set; ...

  9. Angular 4 组件间的通信

    一.输入属性(父组件与子组件通信) 1. 创建工程 ng new demo1 2.创建order组件 ng g component order 3. 在order组件里定义输入属性 order组件的h ...

随机推荐

  1. ASP.NET Core 启用跨域请求

    本文翻译整理自:https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1 一 .Cross-Orig ...

  2. OpenJ_Bailian 7617 输出前k大的数

    题目传送门 OpenJ_Bailian 7617 描述 给定一个数组,统计前k大的数并且把这k个数从大到小输出. 输入 第一行包含一个整数n,表示数组的大小.n < 100000.第二行包含n个 ...

  3. java反射-- Field 用法实践

    java 反射是一种常用的技术手段, 通过加载类的字节码的方式来获取相关类的一些信息 比如成员变量, 成员方法等. Field 是什么呢? field 是一个类, 位于java.lang.reflec ...

  4. 低副瓣阵列天线综合1 matlab HFSS

    车载雷达天线多采用微带贴片天线,贴片振子的形状多种多样,较常用的是矩形: 组阵时多采用先串馈再把串馈好的行或列单元采取并馈的方式组阵,无论是串馈或并馈,想要获得较低的副瓣效果,都需要采取电流幅度加权的 ...

  5. 用VSCode插件来一键填满Github的绿色格子吧-AutoCommit

    autoCommit 一个用于Git自动commit的VSCode插件,它可以用来补充之前忘记提交commit,帮助你把首页的绿色格子填满. 使用效果 使用本插件来控制commit次数. 如下图,你甚 ...

  6. 图解kubernetes调度器SchedulingQueue核心源码实现

    SchedulingQueue是kubernetes scheduler中负责进行等待调度pod存储的对,Scheduler通过SchedulingQueue来获取当前系统中等待调度的Pod,本文主要 ...

  7. 全流程开发 TP6.0实战高并发电商服务系统*完

    在TP6框架中我们可以学到TP整体知识,如下图一所示: 图一:TP6整体知识点 这些内容都会在实战课程中一一涵盖,并且在课程中我们会用到五层架构思想(如图二),和传统的MVC架构有所不一样,这样做可以 ...

  8. 小白学 Python 爬虫（40）：爬虫框架 Scrapy 入门基础（七）对接 Selenium 实战

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  9. linux入门系列6--软件管理之rpm和yum仓库

    前面系列文章中,我们对vi编辑器和46个基本命令进行了介绍,本文将演示在centos7下使用RPM和YUM安装和管理软件. 一.RPM软件包管理器 1.1 RPM背景介绍 ​ RPM(RedHat P ...

  10. Webpack实战（二）：webpack-dev-server的介绍与用法

    为什么要用webpack-dev-server 在开发中,我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后,我们需要执行npm run build命 ...