Scope : $emit() & $on()

จากบทที่แล้ว broadcast จะมีขอบเขตเฉพาะตัวมันเองและลูก แต่ถ้าต้องการส่ง event ให้แม่เราจะใช้ $emit() กัน

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

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

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

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

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

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

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

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="$emit('addCount')">Count++</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}}

สังเกตได้ว่า emit นั้นจะมีผลกับเฉพาะ 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="$emit('addCount')">branch button</button>
				<button type="button" ng-click="$emit('addMultiCount', 10)">branch multi button</button>
			</p>
			<div ng-controller="nodeController as node">
				<p>node count is : \{\{count}}</p>
			</div>
		</div>
	</div>
</body>