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

最新推荐文章于 2023-05-21 20:11:07 发布

JtUnion

最新推荐文章于 2023-05-21 20:11:07 发布

阅读量319

点赞数

分类专栏： web 文章标签： broadcast emit 事件传播机制

本文链接：https://blog.csdn.net/JtUnion/article/details/54885017

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

$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++;
        });
}]);