先引入

设置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. Spring多数据源动态切换

    title: Spring多数据源动态切换 date: 2019-11-27 categories: Java Spring tags: 数据源 typora-root-url: ...... --- ...

  2. 【Spark 内核】 Spark 内核解析-上

    Spark内核泛指Spark的核心运行机制,包括Spark核心组件的运行机制.Spark任务调度机制.Spark内存管理机制.Spark核心功能的运行原理等,熟练掌握Spark内核原理,能够帮助我们更 ...

  3. 20.java-JDBC连接mysql数据库详解

    1.JDBC介绍 jdbc(java database connectivity)为java开发者使用数据库提供了统一的编程接口,它由一组java类和接口组成. JDBC需要用到的类和接口有: Dri ...

  4. 1.常用的cmd命令

    dir      =>  查看当前目录下的所有文件夹 cd..    =>  返回上一级目录 cd/     =>  返回根目录 cd 文件夹  =>  打开当前目录下指定的子 ...

  5. 分享一款基于aui框架的图文发布界面

    本文出自APICloud官方论坛, 感谢论坛版主 川哥哥 的分享. 分享一款基于aui框架的图文发布界面,可以添加多张图可以删除,类似qq空间发布说说,没做服务器后端,只演示前端操作.需要用到UIMe ...

  6. NOIP2004普及组第3题 FBI树

    /* 1106: NOIP2004普及组第3题 FBI树 时间限制: 1 Sec 内存限制: 128 MB 提交: 10 解决: 9 [提交] [状态] [讨论版] [命题人:外部导入] 题目描述 我 ...

  7. VMware Workstation CentOS7 Linux 学习之路(3)--.net coreWeb部署

    1.首先创建一个文件夹,命名为core mkdir core cd core 2.我这里用FlashFXP连接Linux 把我发布的项目上传到CentOS7的core文件夹下 此时我输入命令 dotn ...

  8. Scrum.站立会议介绍

    项目任务分解完毕之后,整个项目要完成的任务也都已经确定,每个人负责的任务也确定.这时候就进入到每天的迭代过程.项目经理的一个职责就是每天负责召开 站立会议. 具体的形式如下: 每天固定时间召开. 项目 ...

  9. latex一些有用的写法

    编辑博文的时候总是忘语法,然后到网上查-- 干脆记一下! 1.编辑漂亮的函数上下标 \(\sum\limits_{i=1}^n\) 对于原有的函数:$\sum\limits_{i=1}^n$ \(\m ...

  10. CSS基础应用总结

    目录 CSS 样式笔记 文字水平居中和垂直居中 如何设置a标签不带下划线 控件右对齐 div上下居中 控件左右居中 控件展示在同一行 设置文字超出部分...显示 CSS 样式笔记 文字水平居中和垂直居 ...