小人儿的笔记（AngularJS）--02
$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++; }); }]);