小人儿的笔记(AngularJS)--02

$scope中事件传播机制1

例1:

<body ng-controller="ParentController">
    <h1>count in body:{{cnt}}h1>
    <button ng-click="doAdd()" type="button">addbutton>
    <button ng-click="doEmit()" type="button">emitbutton>
    <button ng-click="doBroad(5)" type="button">broadbutton>

    <div ng-controller="SubController">
        <h1>count in sub div:{{cnt}}h1>
        <button ng-click="doAdd()" type="button">addbutton>
        <button ng-click="doEmit()" type="button">emitbutton>
        <button ng-click="doBroad()" type="button">broadbutton>

        <div ng-controller="GrandSubController">
            <h1>count in grand sub div:{{cnt}}h1>
            <button ng-click="doAdd()" type="button">addbutton>
            <button ng-click="doEmit()" type="button">emitbutton>
            <button ng-click="doBroad()" type="button">broadbutton>
        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">addbutton>
    <button ng-click="$emit('MyClick')" type="button">emitbutton>
    <button ng-click="$broadcast('MyClick')" type="button">broadbutton>

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

        <div ng-controller="EventController">
            <h1>count in grand sub div:{{cnt}}h1>
            <button ng-click="doAdd()" type="button">addbutton>
            <button ng-click="$emit('MyClick')" type="button">emitbutton>
            <button ng-click="$broadcast('MyClick')" type="button">broadbutton>
        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++;
        });
}]);

你可能感兴趣的:(web)