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

Scope Attribute (@) คือ อะไร ?

Scope Attribute (@) เป็นการ Binding ข้อมูลรูปแบบตัวอักษร (String) ให้ใช้งานใน Scope ของ Directive

(function () {
    var app = angular.module("application", []);
     
    app.controller("demoController", function ($scope) {...});
    app.directive("scopeadd", function () {
		return {
			restrict: 'E',
			scope: {
				someAttr: '@'
			},
			template: '{{someAttr}}'
		};
	});
     
})();

การใช้ Scope Attribute (@) เป็นการลดความซับซ้อนของโค้ดที่เขียนซึ่งสามารถเขียนอีกอย่างได้ดังนี้

(function () {
    var app = angular.module("application", []);
     
    app.controller("demoController", function ($scope) {...});
    app.directive("scopeadd", function () {
		return {
			restrict: 'E',
			template: '{{someAttr}}',
			link: function (scope, element, attrs) {
				scope.someAttr = attrs.someAttr;
			}
		};
	});
     
})();

วิธีการทั้งสองแบบได้ผลเหมือนกัน

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

ทำต่อจากบทที่แล้ว โดยทำการเพิ่ม attribute name ให้กับ <developer> 

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

ทำการ Binding name ใน Directive developer ให้สามารถใช้ค่า String ดังกล่าว ใน Directive ได้

ใน Directive developer ทำเพิ่มชื่อลงใน template

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

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