Angular Expressions คือ รูปแบบโค้ดของ javascript แบบง่าย สั้นๆ
ที่ใช้กำหนดผูกการใช้งานกับตัวแปร โดยมีรูปแบบ
{{ expression }}
ตัวอย่าง
{{1+1}}
{{1+2}}
{{a+b}}
{{user.name}}
{{items[index]}}
จะมีการทำงานคล้าย eval() ใน javascript แต่ใน angularjs จะไม่ได้ใช้
คำสั่ง eval() แต่ใช้ sevice $parse แทน
การทำงาน เช่น ถ้าเรา เอา {{1+1}}
ไปแทรกไว้หน้า view ข้อมูล
<p>{{1+1}}</p>
ผลลัพธ์ที่แสดงทาง browser ก็จะเป็น
<p>2</p>
แบบนี้เป็นต้น
Angular Expressions จะทำงานภายในขอบเขตของ scope object
ซึ่งต่างจาก JavaScript expressions ที่ทำงานอิงไปกับ global window ดังนั้น
จึงไม่สามารถเรียกใช้งาน window document หรือ location ซึ่งเป็นตัวแปร global
.ใน javascript แบบปกติได้
แต่สามารถใช้วิธีเรียกใช้งาน service ที่ angularjs กำหนด เพื่อเรียกใช้ตัวแปร global ได้
เช่น $window แทน window และ $location แทน location หรือ window.location เป็นต้น
หากมีการกำหนด expression ไม่ถูกต้อง จะไม่มีการแจ้ง error แต่ข้อมูลจะถูกกำหนดให้
จะเป็น undefined หรือ null
เราสามารถใช้ filter module ของ angularjs กำหนดรูปแบบการแสดง
ข้อมูลใน expression ได้
{{ 1+1 | currency }}
ผลลัพธ์ที่แสดงทาง browser ก็จะเป็น
$2.00
ไม่สามารถกำหนดรูปแบบ control flow statments
ใน angular expression ได้ เช่น
{{
if(...){ // if statment
...
}
}}
{{
for(....){ // for statement
....
}
}}
ยกเว้นกรณี การใช้งาน ในรูปแบบ เงื่อนไข (a ? b : c) สามารถใช้งานได้
แบบนี้สามารถทำได้ รูปแบบย่อของ if statement
{{
(a==1)?a:0
}}
angular expression จะไม่ทำงานภายนอก scope
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<title>Document</title>
</head>
<body>
{{name}}
<div ng-controller="myCtrl">
{{myname}}
</div>
<script type="text/javascript">
angular.module('app',[])
.controller('myCtrl',['$scope',function($scope){
$scope.name="demo";
$scope.myname="Ninenik";
}]);
</script>
</body>
</html>
จากโค้ดจะเห็นว่า ใน expression ที่ 2 เท่านั้นที่ทำงาน
ส่วน {{name}} จะไม่แสดงค่า เนื่องจากอยู่ภายนอก scope
อย่างไรก็ตาม เราสามารถกำหนด ให้ {{name}} นี้แสดงค่าได้
โดยการทำให้อยู่ภายใน $rootScope ซึ่งจะเริ่มจากตำแหน่ง
<html ng-app="app">
โดย inject $rootScope เข้าไปและกำหนดค่าได้ดังนี้
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
$scope.$rootScope="demo";
$scope.myname="Ninenik";
}]);
แบบนี้ ค่า {{name}} ก็จะแสดงคำว่า demo
การกำหนดให้ เรียกใช้งาน {{expression}} ครั้งเดียว
หรือ One-time binding จะกำหนดในรูปแบบ {{::expression}}
หากมีการกำหนดในรูปบบนี้ ค่า จะไม่เปลี่ยนแปลง เมื่อมีการกำหนดค่า หรือเปลี่ยน
แปลงค่าข้อมูลด้วยฟังก์ชั่นเพิ่มเติมทีหลัง
การใช้งาน expression ใน directive ประเภท event เช่น ngClick,ngPress ...
จะทำให้เราสามารถเรียกใช้งาน event object ในรูปแบบ $event ภายใน scope ได้
เช่น
<button type="button" ng-click="dosomething($event)">Run</button>
<script type="text/javascript">
angular.module('app',[])
.controller('myCtrl',['$scope','$rootScope',function($scope,$rootScope){
$scope.$rootScope="demo";
$scope.myname="Ninenik";
$scope.dosomething = function(event){
console.log(event);
};
}]);
</script>
เนื้อหานี้อ้างอิงจาก https://docs.angularjs.org/guide/expression
อธิบายตามความเข้าใจ เป็นข้อมูลสำหรับศึกษาส่วนอื่นต่อไป
