zoukankan      html  css  js  c++  java
  • angularjs中控制器之间的通信----$on、$emit和$broadcast解析

    $on、$emit和$broadcast使得event、data在controller之间的传递变的简单。

    • $emit只能向parent controller传递event与data
    • $broadcast只能向child controller传递event与data
    • $on用于接收event与data

    例如:

    <div ng-controller="ParentCtrl">                <!--父级-->
        <div ng-controller="SelfCtrl">              <!--自己-->
            <a ng-click="click()">click me</a>
            <div ng-controller="ChildCtrl"></div>   <!--子级-->
        </div>
        <div ng-controller="BroCtrl"></div>         <!--平级-->
    </div>
    

      

    app.controller('SelfCtrl', function($scope) {
        $scope.click = function () {
    $scope.$broadcast('to-child', '我传给子控制器的数据'); $scope.$emit('to-parent', '我传给父控制器的数据'); } }); app.controller('ParentCtrl', function($scope) { $scope.$on('to-parent', function(event,data) { //监听to-parent console.log('ParentCtrl', data); //父级能得到值 }); $scope.$on('to-child', function(event,data) { console.log('ParentCtrl', data); //子级得不到值 }); }); app.controller('ChildCtrl', function($scope){ $scope.$on('to-child', function(event,data) { console.log('ChildCtrl', data); //子级能得到值 }); $scope.$on('to-parent', function(event,data) { console.log('ChildCtrl', data); //父级得不到值 }); }); app.controller('BroCtrl', function($scope){ $scope.$on('to-parent', function(event,data) { console.log('BroCtrl', data); //平级得不到值 }); $scope.$on('to-child', function(event,data) { console.log('BroCtrl', data); //平级得不到值 }); });

      

    最终结果

    ParentCtrl  我传给父控制器的数据

    ChildCtrl     我传给子控制器的数据

    备注:当然service也可以在不同controller中通信

  • 相关阅读:
    XAMPP配置8080端口
    Composer安装使用
    .Net商品管理(注释,百度,提问,对比,总结)
    .Net数据库操作
    VS链接数据库
    .Net中字典的使用
    一套解决方案,多个项目
    转化一下解决问题的思路,弯道超车
    灵活的运用Model类
    Razor数组数据
  • 原文地址:https://www.cnblogs.com/8080zh/p/9288015.html
Copyright © 2011-2022 走看看