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

来源：互联网发布：蓝牙控制单片机程序编辑：程序博客网时间：2024/06/17 19:04

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

0 0