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

จากที่เราได้เข้าใจเรื่อง Isolated Scope ไปแล้ว เรามาดูกันต่อ ใน Directive นั้นเราไม่สามารถเรียกใช้ฟังก์ชั่นต่างๆที่อยู่ใน Controller ได้

เราจำเป็นต้องใช้ Scope Expression (&)

Scope Expression (&) คือ อะไร ?

Scope Expression (&) เป็นการ Binding ฟังก์ชั่นจาก Controller ให้สามารถใช้งานใน Scope ของ Directive ได้

กรณีที่ไม่มีพารามิเตอร์

(function () {
    var app = angular.module("application", []);
     
    app.controller("demoController", function ($scope) {
        $scope.someFunction = function () {...};
    });
    app.directive("scopeand", function () {
		return {
			restrict: 'E',
			scope: {
				someAttr: '&'
			},
			template: '<button ng-click="someAttr()">Go to Work</button>'
		};
	});
     
})();

กรณีที่มีพารามิเตอร์

(function () {
    var app = angular.module("application", []);
     
    app.controller("demoController", function ($scope) {
        $scope.someFunction = function (parameter) {...};
    });
    app.directive("scopeand", function () {
		return {
			restrict: 'E',
			scope: {
				someAttr: '&'
			},
			template: '<button ng-click="someAttr({parameter:someValue})">Go to Work</button>'
		};
	});
     
})();

ตัวอย่างการใช้งาน Scope Expression (&)

ทำต่อจากบทที่แล้ว ใน Controller ให้ทำการเพิ่มฟังก์ชั่น doIt() 

(function () {
	var app = angular.module("application", []);
	
	app.controller("demoController", function ($scope) {
		$scope.doIt = function () {
			alert("hello");
		};
	});
	app.directive("developer", function () {...});
	
})();

ทำการเพิ่ม attribute task ให้กับ <developer> 

<body ng-controller="demoController as demo">
	<developer task="doIt()"></developer>
	<developer task="doIt()"></developer>
	<developer task="doIt()"></developer>

ทำการ Binding task ใน Directive developer ให้สามารถใช้ฟังก์ชั่น doIt(message) ใน Directive ได้

ใน Directive developer ทำการเพิ่มปุ่มลงใน template

(function () {
	var app = angular.module("application", []);
	
	app.controller("demoController", function ($scope) {
		$scope.doIt = function () {
			alert("hello");
		};
	});
	app.directive("developer", function () {
		return {
			restrict: 'E',
			scope: {
				task: '&'
			},
			template: '<div><input type="text" ng-model="work" /><button ng-click="task()">Go to Work</button></div>'
		};
	});
	
})();

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

แล้วถ้ามีพารามิเตอร์ละ

เราจะทำการเพิ่มพารามิเตอร์ให้กับฟังก์ชั่น doIt() 

$scope.doIt = function (data) {
	alert(data);
};

เพิ่มพารามิเตอร์ในส่วนที่เรียกใช้ function ใน html

<body ng-controller="demoController as demo">
	<developer task="doIt(message)"></developer>
	<developer task="doIt(message)"></developer>
	<developer task="doIt(message)"></developer>

ใน Directive Developer ให้ทำการ map ตัวแปร message ให้เข้ากับค่าที่เราต้องการส่งไปในพารามิเตอร์ คือ work

  • task({message:work})
app.directive("developer", function () {
	return {
		restrict: 'E',
		scope: {
			task: '&'
		},
		template: '<div><input type="text" ng-model="work" /><button ng-click="task({message:work})">Go to Work</button></div>'
	};
});

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