文件层级

index.html

<!DOCTYPE html>

<html ng-app="nickApp">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>angular之$broadcast、$emit、$on传值</title>

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script src="http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>

    <script src="js/route.js"></script>

    <script src="js/app.js"></script>

    <script src="js/service/PublicDataService.js"></script>

</head>

<body ng-controller="bodyCtl">

<button ng-click="goHome()">go home</button>

<button ng-click="goMain()">$state go main</button>

<a ui-sref="main({paramsData:'ui-sref'})">ui-sref go main</a>

<div ui-view></div>

<h2>$emit $broadcast $on</h2>

<div ng-controller="ParentCtrl">                <!--父级-->

    <div ng-controller="SelfCtrl">              <!--自己-->

        <button class="btn" ng-click="click()">click me</button>

        <div ng-controller="ChildCtrl"></div>   <!--子级-->

    </div>

    <div ng-controller="BroCtrl"></div>         <!--平级-->

</div>

</body>

</html>

templates - home.html

<h2>home</h2>

<button ng-click="goMain()">$state go main</button>

templates - main.html

<h2>main</h2>

js - route.js

var nickApp = angular.module('nickApp', ['ui.router'])

    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/home');

        $stateProvider

            .state('home', {

                url: '/home',

                templateUrl: 'templates/home.html',

                controller: 'HomeCtl',

                //params: {paramsData: null}

                navButtons:[] //自定义一些参数 在controll通过$state.get('home')得到对象

            })

            .state('main', {

                url: '/main',

                templateUrl: 'templates/main.html',

                controller: 'MainCtl',

                params: {paramsData: null} //目标页面定义接收的参数prameData

            })

    }])

js - app.js

nickApp

    .controller('bodyCtl', ['$state', '$scope', function ($state, $scope) {

        $scope.goMain = function () {

            $state.go('main', {paramsData: 'body go main'});//传参时参数一致prameData--目标页路由配置params:{paramsData: null}

        };

        $scope.goHome = function () {

            $state.go('home', {paramsData: 'home page'});//目标页路由未配置params则$stateParams 为空

        };

        $scope.data = 'body data';

        console.log($scope.data);

        console.log($scope.homeData);//父无法用子scope homeData 使用方法传值接收 $on $emit $broadcast

    }])

    .controller('HomeCtl', ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) {

        $scope.goMain = function () {

            $state.go('main', {param: 'home go main'});//不一致 $stateParams 接收不到则为目标页面定义接收的参数{paramsData: null}

        };

        console.log($stateParams);

        console.log($scope.data);//子用父scope data

        $scope.homeData = 'home data';

        console.log($scope.homeData);

        console.log($state.get('home'));

        console.log($state.get('main'));

    }])

    .controller('MainCtl', ['$scope', '$stateParams', function ($scope, $stateParams) {

        console.log($stateParams);

        console.log($scope.data);//子用父scope data

    }])

    //$emit 子向父 controller 传 event、data -- $broadcast 父传子 -- $on 接收

    .controller('SelfCtrl', ['$scope', 'PublicDataService', function ($scope, PublicDataService) {

        $scope.click = function () {

            $scope.$broadcast('to-child', 'to-child data'); //父传子

            $scope.$emit('to-parent', 'to-parent data'); //子传父

        };

        $scope.publicData = PublicDataService.publicData;

        console.log($scope.publicData);

    }])

    .controller('ParentCtrl', ['$scope', 'PublicDataService', function ($scope, PublicDataService) {

        $scope.$on('to-parent', function (event, data) {

            console.log('ParentCtrl--' + data);       //父controller能得到传给父级值

        });

        $scope.$on('to-child', function (event, data) {

            console.log('ParentCtrl--' + data);       //父controller得不到传给子级值

        });

        $scope.publicData = PublicDataService.publicData;

        console.log($scope.publicData);

    }])

    .controller('ChildCtrl', ['$scope', 'PublicDataService', function ($scope, PublicDataService) {

        $scope.$on('to-child', function (event, data) {

            console.log('ChildCtrl--' + data);         //子controller能得到传给子级值

        });

        $scope.$on('to-parent', function (event, data) {

            console.log('ChildCtrl--' + data);         //子controller得不到传给父级值

        });

        $scope.publicData = PublicDataService.publicData;

        console.log($scope.publicData);

    }])

    /*

     平级得不到值 解决办法

     *用上面的$state.go()

     *或者定义一个公共服务 PublicDataService 注入 controller 就可以使用了

     *或 在配置路由时自定义一些参数 在controll--HomeCtl通过$state.get('home')得到一个对象，它包含了配置home页的路由参数

     */

    .controller('BroCtrl', ['$scope', 'PublicDataService', function ($scope, PublicDataService) {

        $scope.$on('to-parent', function (event, data) {

            console.log('BroCtrl', data);          //平级得不到值

        });

        $scope.$on('to-child', function (event, data) {

            console.log('BroCtrl', data);          //平级得不到值

        });

        $scope.publicData = PublicDataService.publicData;

        console.log($scope.publicData);

    }])

js - service - PublicDataService.js

nickApp

    .factory('PublicDataService', [function () {

        var publicData = 'public service data';

        return {

            publicData: publicData

        }

    }])

angular之$broadcast、$emit、$on传值的更多相关文章

  1. angular js $post,$get请求传值

    困扰了我好几天的问题!!! 刚开始学play框架,在向后台传值时,一直不成功! 当你用$POST传递一个参数时: HTML: <button ng-click=test()>测试</ ...

  2. angular学习笔记 父子组件传值

    一.如何将父组件的值传到子组件? 在子组件里面引入Input,然后用@Input 变量1 接收 接着在父组件中的,子组件标签上添加[msg]="msg",中括号里的名字要与子组件中 ...

  3. angular学习第1步

    #### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...

  4. js 本地存储 localStorage 之 angular

    今天项目中用到 php yii框架 用的不是 angular路由 所以用rootScope传值是不行的 我就用到了 localStorage 本地持久化存储 如下 set 顾名思义是设置 值 loca ...

  5. AngularJS之ng-options的best practise

    废话不多说,直接上代码. function MySelectCtrl($scope) { $scope.Model = [ { id: 10002, MainCategory: '男', Produc ...

  6. 一步一步学Vue(三)

    接上篇,有同事看了我写的博客,觉得我这人不靠谱,文笔太白了,不够严肃,所以这次我一定要做一个严肃的人,写博客要有写博客的态度,第三篇开始我在考虑一个问题,会不会太着急了,要知道Vue的组件化时它的一个 ...

  7. Angular 父子组件传值

    Angular 父子组件传值 @Input  @Output  @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...

  8. Angular中父子组件双向绑定传值

    下面为大家展示一个较为简单的ng父子组件双向绑定传值,下面是父组件页面 这个页面的大概功能就是父组件(红色)通过输入框输入内容反映到子组件上进行展示,并且进行了投影, 子组件(橙黄色)通过Input输 ...

  9. angular之$on、$emit、$broadcast

    1.$scope.$on view事件 //View被加载但是DOM树构建之前时: $scope.$on('$viewContentLoading', function(event, viewConf ...

随机推荐

  1. ［java之设计模式］策略模式

    策略模式(strategy pattern) 定义>> 将一系列的算法封装到一些列的类里面,并且可以相互替换 作用>> 将算法的变化独立于客户端,将算法的指责和算法的行为分开, ...

  2. Java 深入理解内部类

    摘自海子:Java内部类详解 深入理解内部类 1.为什么成员内部类可以无条件访问外部类的成员? 在此之前,我们已经讨论过了成员内部类可以无条件访问外部类的成员,那具体究竟是如何实现的呢?下面通过反编译 ...

  3. JS の 套路 II ~~

    今天的需求是 给表单赋值 还有修改并保存.以下的方法应该是个本方法,但好上手!! 给表单值 <form> <table> <tbodu> 这里假装有一堆表单的一对t ...

  4. iOS利用block实现链式编程方法（Objective-C链式编程）

    objc利用block实现链式编程方法 因为不好读.block和其他语言的匿名函数一样,很多程序员刚开始很难主动去用他. 本文描述block作为属性的实际使用,看懂block,并讲解如何利用block ...

  5. 给大家推荐一款非常好用的表单验证插件：lr-verify.js

    废话不说,直接上代码说明,1分钟学会: 例: 1.验证配置 $.extend(Verify.types, { "must" : { "verify" : fun ...

  6. svn造成桌面图标显示问号

    (1)在使用svn客户端的时候桌面的所有图标上面都加了一个“?”.而且在桌面上新建的文件夹或文件都会打个问号,下面是笔者搜集的方法:在桌面创建记事本文件,把这句话复制进去for /r . %%a in ...

  7. 关于osi的7层与tcp的4层网络协议的理解

    osi 七层模型 应用层 提供接口 表示层 机器语言的二进制转换 对话层 决定是否传输 传输层 确定可不可靠 排差错 控流 网络层 提供逻辑地址 选路 数据链路层 mac 错误检测 物理层 设备间的比 ...

  8. jquery中的 append , after , prepend , before 区别

    jQuery append() 方法在被选元素的结尾插入内容. jQuery prepend() 方法在被选元素的开头插入内容. jQuery after() 方法在被选元素之后插入内容. jQuer ...

  9. Redis之Redis消息订阅发布简介

    概念: Redis消息订阅发布是进程间的一种消息通信模式,发送者pub发送消息,订阅者sub接收消息. 使用须知: 需要先订阅后发布,才能接收到消息.在订阅时,相当于创建了可供发布的频道. 案例: ( ...

  10. PHP导入Excel表

    初始化参数,先导入PHPExcel类 /** * 读出Excel表格数据 * @param $filename 文件名 * @param string $encode 编码格式 * @return a ...