小人儿的笔记（AngularJS）--02

最新推荐文章于 2020-01-14 13:50:51 发布

原创最新推荐文章于 2020-01-14 13:50:51 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#broadcast #emit #事件传播机制

web 专栏收录该内容

5 篇文章

订阅专栏

本文通过实例详细介绍了AngularJS中事件的传播机制，包括$emit、$broadcast与$on的用法，展示了如何在不同层级的控制器间传递事件与数据。

$scope中事件传播机制1

例1：

<body ng-controller="ParentController">
    <h1>count in body:{{cnt}}</h1>
    <button ng-click="doAdd()" type="button">add</button>
    <button ng-click="doEmit()" type="button">emit</button>
    <button ng-click="doBroad(5)" type="button">broad</button>

    <div ng-controller="SubController">
        <h1>count in sub div:{{cnt}}</h1>
        <button ng-click="doAdd()" type="button">add</button>
        <button ng-click="doEmit()" type="button">emit</button>
        <button ng-click="doBroad()" type="button">broad</button>

        <div ng-controller="GrandSubController">
            <h1>count in grand sub div:{{cnt}}</h1>
            <button ng-click="doAdd()" type="button">add</button>
            <button ng-click="doEmit()" type="button">emit</button>
            <button ng-click="doBroad()" type="button">broad</button>
        </div>
    </div>
</body>

angular.module('myApp', [])
.controller(
    'ParentController', ['$scope', function($scope){
        $scope.cnt=0;      
        $scope.doAdd=function(){
            this.cnt++;         
        };
        $scope.doEmit=function(){
            $scope.$emit("MyClick");
        };
        $scope.doBroad=function(n){            
            $scope.$broadcast("MyClick",n);
        };
        $scope.$on("MyClick",function(a,n){
            if(n){
                $scope.cnt+=n;
            }
            else{
                $scope.cnt++;
            }
        });
        //$emit能向当前控制器和parent controller传递event与data
        //$broadcast能向当前控制器和child controller传递event与data
        //$on用于监控接收event与data

}]).controller('SubController', ['$scope', function($scope){
    $scope.cnt=0;
    $scope.$on("MyClick",function(a,n){
            if(n){
                $scope.cnt+=n;
            }
            else{
                $scope.cnt++;
            }
    });
    $scope.doAdd=function(){
        this.cnt++;         
    };
    $scope.doEmit=function(){
        $scope.$emit("MyClick");
    };
    $scope.doBroad=function(){         
        $scope.$broadcast("MyClick");
    };
}]).controller('GrandSubController', ['$scope', function($scope){
    $scope.cnt=0;
    $scope.$on("MyClick",function(a,n){
            if(n){
                $scope.cnt+=n;
            }
            else{
                $scope.cnt++;
            }
    });
    $scope.doAdd=function(){
        this.cnt++;         
    };
    $scope.doEmit=function(){
        $scope.$emit("MyClick");
    };
    $scope.doBroad=function(){         
        $scope.$broadcast("MyClick");
    };
}])

$scope中事件传播机制2

例1：使用同样的控制器名，减少冗余代码

<body ng-controller="EventController">
    <h1>count in body:{{cnt}}</h1>
    <button ng-click="doAdd()" type="button">add</button>
    <button ng-click="$emit('MyClick')" type="button">emit</button>
    <button ng-click="$broadcast('MyClick')" type="button">broad</button>

    <div ng-controller="EventController">
        <h1>count in sub div:{{cnt}}</h1>
        <button ng-click="doAdd()" type="button">add</button>
        <button ng-click="$emit('MyClick')" type="button">emit</button>
        <button ng-click="$broadcast('MyClick')" type="button">broad</button>

        <div ng-controller="EventController">
            <h1>count in grand sub div:{{cnt}}</h1>
            <button ng-click="doAdd()" type="button">add</button>
            <button ng-click="$emit('MyClick')" type="button">emit</button>
            <button ng-click="$broadcast('MyClick')" type="button">broad</button>
        </div>
    </div>
</body>

angular.module('myApp', [])
.controller(
    'EventController', ['$scope', function($scope){
        $scope.cnt=0;      
        $scope.doAdd=function(){
            this.cnt++;         
        };      
        $scope.$on("MyClick",function(){
            $scope.cnt++;
        });
}]);