สิ่งที่ควรรู้

$on() คือ อะไร

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

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

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

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

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

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

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

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 ดังกล่าว

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<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 : 0

branch count is : 0

node count is : 0

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

กรณีที่มีการส่ง Argument เข้ามาในฟังก์ชั่น

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

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

root count is : 0

branch count is : 0

node count is : 0