Scope : $broadcast() & $on()

$on() คือ อะไร

$on เป็นฟังก์ชั่นที่ไว้สำหรับกำหนด event ให้กับ element ต่างๆใน AngularJS โดยลักษณะการทำงานเหมือนกับ on() ใน jQuery

ซึ่งมีโครงสร้างดังนี้

$on(ชื่อ event, ฟังก์ชั่นที่ถูกเรียกใช้);

$broadcast() คือ อะไร ?

$broadcast เป็นฟังก์ชั่นที่เรียกใช้งาน event ที่กำหนดไว้กับฟังก์ชั่น $on โดยเรียกใช้นั้นมีขอบเขตตั้งแต่ตัวเองลงไป

โดยมีโครงสร้างดังนี้

$broadcast(ชื่อ event, argument ต่างๆ);

ตัวอย่างการใช้งาน $broadcast และ $on

เราจะทำตัวอย่างเพิ่มค่าโดยเรียกจากในส่วนที่ถูกใช้งาน ให้เกิดการเปลี่ยนแปลงที่ตัวมันกับลูกของมัน

ในไฟล์ js กำหนด ตัวแปร count ใน controller และฟังก์ชั่นในการเพิ่มค่า count

angular.module('application', [])
    .controller('rootController', function ($scope) {
        $scope.count = 0;
        $scope.$on('addCount', function () {
            $scope.count += 1;
        });
    })
	.controller('branchController', function ($scope) {
        $scope.count = 0;
        $scope.$on('addCount', function () {
            $scope.count += 2;
        });
    })
	.controller('nodeController', function ($scope) {
        $scope.count = 0;
        $scope.$on('addCount', function () {
            $scope.count += 3;
        });
    });

ในไฟล์ html ทำเรียกใช้ controller ดังกล่าว

<body ng-app="application">
	<div ng-controller="rootController as root">
		<p>root count is : \{\{count}}</p>
		<div ng-controller="branchController as branch">
			<p>branch count is : \{\{count}}
				<button type="button" ng-click="$broadcast('addCount')">branch button</button>
			</p>
			<div ng-controller="nodeController as node">
				<p>node count is : \{\{count}}</p>
			</div>
		</div>
	</div>
</body>

จะได้ผลลัพธ์ดังนี้

root count is : {{count}}

branch count is : {{count}}

node count is : {{count}}

สังเกตได้ว่า broadcast นั้นจะมีผลกับเฉพาะ element นั้นและลูกหลานของ element นั้น เท่านั้น

ในไฟล์ js สร้าง event ที่รับพารามิเตอร์

angular.module('application', [])
	.controller('rootController', function ($scope) {
        $scope.count = 0;
        $scope.$on('addCount', function () {
            $scope.count += 1;
        });
		$scope.$on('addMultiCount', function (event, num) {
			console.log(num);
            $scope.count += parseInt(num, 10);
        });
    })
	.controller('branchController', function ($scope) {
        $scope.count = 0;
        $scope.$on('addCount', function () {
            $scope.count += 2;
        });
		$scope.$on('addMultiCount', function (event, num) {
			console.log(num);
            $scope.count += parseInt(num, 10);
        });
    })
	.controller('nodeController', function ($scope) {
        $scope.count = 0;
        $scope.$on('addCount', function () {
            $scope.count += 3;
        });
		$scope.$on('addMultiCount', function (event, num) {
			console.log(num);
            $scope.count += parseInt(num, 10);
        });
    });

ในไฟล์ html ทำการเพิ่มปุ่มในการเพิ่มค่า count

<body ng-app="application">
	<div ng-controller="rootController as root">
		<p>root count is : \{\{count}}</p>
		<div ng-controller="branchController as branch">
			<p>branch count is : \{\{count}}
				<button type="button" ng-click="$broadcast('addCount')">branch button</button>
				<button type="button" ng-click="$broadcast('addMultiCount', 10)">branch multi button</button>
			</p>
			<div ng-controller="nodeController as node">
				<p>node count is : \{\{count}}</p>
			</div>
		</div>
	</div>
</body>