例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能向當(dāng)前控制器和parent controller傳遞event與data //$broadcast能向當(dāng)前控制器和child controller傳遞event與data //$on用于監(jiān)控接收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"); };}])例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++; });}]);新聞熱點(diǎn)
疑難解答
圖片精選
