angularJS控制器之间的相互通信方式、$broadcast、$emit、$on

在项目中，我们可能会很经常性的利用到控制器之间的相互通信，在angular中的控制器之间的相互通信有以下几种方式：

1）通过本地数据的存储localstorage,sessionstorage,

2）通过rootScope，顶级作用域

3）通过$broadcast,$on,$emit的方式进行通信

在此就讲解下如何通过第三种方式进行通信的问题：

$broadcast：顾名思义是广播的意思，一般用于父级控制器向子控制器传递信息的方法。

$emit：主要是用于子控制器向父控制器传递信息的方法。

$on：用于接收$broadcast,$emit的消息

情况一：父---->子之间的通信（$broadcast）

<script src="../angular.js"></script>
<script>
angular.module("app", [])
    .controller("child", function($scope) {
        $scope.$on("parentChange", function(e, m) {//参数一：监听的事件名，回调函数的参数一：以对象的形式返回相关数据，参数二：你传递的参数
            $scope.change = "changed";
            $scope.child = m;
        })
    })
    .controller("parent", function($scope) {
        $scope.$watch("parent", function(n, o) {
            if (n == o) {
                return;
            }
            $scope.$broadcast("parentChange", n)
        })
    })
</script>

<body>
    <div ng-controller="parent">
        Parent: {{parent}}
        <input type="text" ng-model="parent">

        <div ng-controller="child">
            {{change}} Child: {{child}}
        </div>
    </div>
</body>

情况二：子--->父的通信 ($emit)

<script src="../angular.js"></script>
<script>
angular.module("app", [])
    .controller("parent", function($scope) {
        $scope.$on("childChange", function(e, m) {
            $scope.change = "changed";
            $scope.parent = m
        })
    })
    .controller("child", function($scope) {
        $scope.$watch("child", function(n, o) {
            if (n == o) {
                return;
            }
            $scope.$emit("childChange", n)
        })
    })
</script>


<body ng-controller="parent">
    {{change}} Parent: {{parent}}
    <div ng-controller="child">
        Child: {{child}}
        <input type="text" ng-model="child">
    </div>
</body>

第三种：同级的兄弟控制器之间的相互通信（要额外定义一个服务）

<script src="../angular.js"></script>
<script>
angular.module("app", [])
    .service("myServive", function($rootScope) {
        return {
            change: function(n) {
                $rootScope.$broadcast("valueChange", n);

            }
        }
    })
    .controller("bro1", function($scope, myServive) {
        $scope.$watch("value1", function(n) {
            myServive.change(n);
        })

        $scope.$on("valueChange", function(e, m) {
            console.log("value1");
            $scope.value1 = m;
        })
    })
    .controller("bro2", function($scope, myServive) {
        $scope.$watch("value2", function(n) {
            myServive.change(n);
        })

        $scope.$on("valueChange", function(e, m) {
            console.log("value2");
            $scope.value2 = m;
        })
    })
</script>


<body>
    <div ng-controller="bro1">
        <h3> value1:</h3>
        <input type="text" ng-model="value1">
    </div>
    <div ng-controller="bro2">
        <h3>value2:</h3>
        <input type="text" ng-model="value2">
    </div>
</body>

同级控制器之间的相互通信，比起前面两种情况确实来的稍微复杂一点，但是本质上还是利用的上一级的控制器进行通信（以服务的方式）

写这篇文章的原因就是在我的项目中我遇到了一个需求：我的页面中会用到angular-bootstrap的模态弹出框，现在要求模态框是没用内容的，通过z-index设置页面的内容（而非模态框）让其浮现到模态框上面（他有两个按钮），通过点击这两个按钮让模态框消失（已经设置模态框的backdtop:'static'）,【之前都是点击模态框“确认”，“取消”按钮才消失模态框】，现在是通过点击页面的上的两个按钮（与模态框没有联系）让它消失。

这个时候就需要通过同级控制器之间的相互通信。

 

posted @ 2017-08-22 21:47  BuleDog  阅读(442)  评论(0)  编辑  收藏  举报