码迷,mamicode.com
首页 > 其他好文 > 详细

Angular中$broadcast和$emit的使用方法

时间:2018-08-25 20:11:58      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:follow   ret   not   hand   变量   blank   target   参数   style   

要在控制器之间传递变量变化需要使用angular中的$broadcast$emit方法来传递,同时使用$on来接收事件并作出响应。

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>

上述代码使用$watch监听parent的值的变化,当发生变化时就会“广播”出parentChange事件并传递了参数(输入框的值),此时子元素作用域中使用了$scope.$on("parentChange, handler)" 来接收parentChange事件,然后接受输入框的值并赋值给子作用域中的child变量。 这样就完成了值的传递。

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>

当子元素的child值发生变化时,会向上级发出childChange事件,此时父元素正在监听的$on(“childChange”)会做出响应,将传递的参数赋值给parent,整个流程与 broadcast类似。

上述作用域均存在层级关系,如果对于同级的作用域该如何做呢?

我们可以使用服务来广播事件:

<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>

我们在服务中运用了$rootScope,所有的作用域都从属于它,基于这点,我们可以在根作用域中广播事件,$rootScope.$broadcast("valueChange", n);,当每个子作用域中的值发生变化时我们都会调用服务中的change 方法来广播这个事件,同时每个作用域又都在监听$on("valueChange") 事件并作出相应处理,这样就实现了子作用域中的值会传递给兄弟作用域了。

更多参考: 
http://brandonclapp.com/using-angularjs-services-to-broadcast-messages-between-controllers/ 
http://www.codelord.net/2015/05/04/angularjs-notifying-about-changes-from-services-to-controllers/

Angular中$broadcast和$emit的使用方法

标签:follow   ret   not   hand   变量   blank   target   参数   style   

原文地址:https://www.cnblogs.com/calvin-dong/p/9535021.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!