Ekspresi adalah cuplikan kode seperti JavaScript, biasanya ditempatkan di area terikat (seperti {{ekspresi}}). Ekspresi diuraikan dan dieksekusi melalui layanan $ parse (http://code.angularjs.org/1.0.2/docs/api/ng.$parse).
Misalnya, berikut ini adalah ekspresi yang valid dalam sudut:
1. Ekspresi sudut vs ekspresi JS
Ini mudah bagi orang untuk mengaitkan ekspresi tampilan sudut sebagai ekspresi JavaScript, tetapi ini tidak sepenuhnya benar, karena Angular tidak mengevaluasi ekspresi melalui eval JavaScript (). Anda dapat menganggap ekspresi sudut sebagai ekspresi JavaScript dengan perbedaan berikut:
Di sisi lain, jika kita ingin menjalankan kode JavaScript sewenang -wenang (dalam ekspresi sudut), kita dapat menulis kode itu ke salah satu metode pengontrol dan menyebutnya. Jika kita ingin mengevaluasi () ekspresi sudut dalam JavaScript, kita dapat menggunakan metode $ eval ().
<! Doctype html> <html lang = "zh-cn" ng-app = "expressionTest"> <head> <meta charset = "utf-8"> <itement> ekspresi-e1 </iteme> <style type = "text/css"> .ng-cloak {display: Tidak Ada; } </tyle> </head> <body ng-controller = "myctrl"> 1 + 2 = {{1 + 2}} <br/> ekspresi: <input type = "text" ng-model = "expr"/<button ng-click = "addexp (expr)" evaluasi </dute </tombol </li-repeat = "evexp in" evelute </evelute </evelute </li-repeat = </li-repeat = "evelute </evelute </evelute </li-repeat = </li-repeat =" evelute </evelute </evelute </li-repeat = </li-repeat = "evelute </evelute </puton> <Li> <Li> NG-klik = "RemoveExp ($ index)" href = ""> x </a>] <tt> {{expr}} </tt> => <span ng-bind = "$ parent. $ eval (expr)"> </span> </li> </ul> <script src = "../ angular-1.1.1.1.1.1.1.1 type = "text/javascript"> var app = angular.module ("ExpressionTest", []); app.controller ("myctrl", function ($ scope) {var exprs = $ scope.exprs = []; $ scope.expr = "3*10 | mata uang"; $ scope.addexp = function (expr) {exprs.push (expr);}; $ scope.rempempempempeExp = function (index) {expush (expr);}; $ scope.rempempempempempeExp = function (index) {expush (expr);}; $ scope.rempempempempempeExp = function) {index) {expr); }); </script> </body> </html>2. Evaluasi properti
Konteks lingkungan parsing ekspresi sudut adalah ruang lingkup, sedangkan JavaScript adalah jendela (harus merujuk pada mode EVEL yang ketat), dan sudut perlu mengakses objek jendela global melalui $ window. Misalnya, jika kita perlu memanggil peringatan () yang ditentukan pada objek jendela dalam suatu ekspresi, kita perlu menggunakan $ window.alert (). Ini dimaksudkan untuk menghindari mengakses keadaan global secara tidak sengaja (sumber umum bug halus).
<! Doctype html> <html lang = "zh-cn" ng-app = "property evaluasi"> <head> <meta charset = "utf-8"> <itement> property evaluasi </iteme> <style type = "text/css"> .ng-cloak {no pajangan: Tidak Ada; } </tyle> </head> <body> <div ng-controller = "myctrl"> Nama: <input ng-model = "name" type = "text"/> <button ng-click = "salam ()"> salam </button> </div> <script src = "../ angular-1.1.js" TYPE = " type = "text/javascript"> var app = angular.module ("propertieValuasi", []); app.controller ("myctrl", function ($ scope, $ window) {$ scope.name = "kitty"; $ scope.greet = function () {$ window.alert ("hello" + $ scope.name);};}); </script> </body> </html>3. Memaafkan (toleransi, toleransi kesalahan?)
Evaluasi ekspresi memaafkan tidak terdefinisi dan nol. Dalam JavaScript, ketika A bukan objek, evaluasi ABC, pengecualian akan dilemparkan. Terkadang ini masuk akal untuk bahasa umum, dan evaluasi ekspresi terutama digunakan untuk pengikatan data, dan bentuk umum adalah sebagai berikut:
{{ABC}}
Jika A tidak ada, tidak ada tampilan yang tampaknya lebih masuk akal daripada melempar pengecualian (kecuali kita menunggu server untuk merespons, yang akan didefinisikan dalam waktu singkat). Jika ekspresi tidak cukup toleran saat mengevaluasi, maka kami menulis kode yang mengikat dengan sangat membingungkan:
{{((A || {}). B || {}). C}} // Ini ...
Demikian pula, ketika mengacu pada fungsi ABC (), jika tidak terdefinisi atau nol, maka cukup mengembalikan tidak terdefinisi.
4. Tidak ada pernyataan aliran kontrol
Kami tidak dapat menulis pernyataan kontrol proses dalam ekspresi. Alasan di balik ini adalah bahwa sistem inti sudut adalah bahwa logika aplikasi harus berada di pengontrol (ruang lingkup), bukan dalam tampilan. Jika kita perlu menambahkan cabang bersyarat, loop atau melemparkan pengecualian ke dalam ekspresi tampilan, kita dapat mendelegasikan metode JavaScript sebagai gantinya (Anda dapat memanggil metode dalam ruang lingkup).
5. Filter
Ketika kami menyajikan data kepada pengguna, kami mungkin perlu mengonversi data dari format asli ke format yang ramah (sangat mudah dibaca). Misalnya, kami memiliki objek data yang perlu diformat berdasarkan wilayah sebelum ditampilkan kepada pengguna. Kita dapat meneruskan ekspresi ke serangkaian filter, seperti:
Nama | huruf besar
Evaluasi ekspresi ini dapat dengan mudah meneruskan nilai nama ke dalam filter huruf besar.
Filter rantai menggunakan sintaks ini:
Nilai | filter1 | filter2
Kami juga dapat mentransfer parameter yang dibagi dengan titik dua menjadi filter, misalnya, menampilkan 123 di dua tempat desimal:
123 | Nomor: 2
6. awalan "$"
Kita mungkin merasa aneh, apa arti awalan "$"? Ini adalah awalan sederhana (mencegah konflik) yang digunakan oleh sudut untuk membedakan nama API dari API lain. Jika Angular tidak menggunakan $, maka evaluasi a.length () akan mengembalikan tidak ditentukan. Karena baik A maupun sudut tidak mendefinisikan properti ini.
Mempertimbangkan bahwa versi sudut di masa depan dapat memilih untuk meningkatkan panjang, ini akan mengubah perilaku ekspresi ini. Yang lebih buruk adalah bahwa kita pengembang dapat menciptakan properti panjang yang kemudian akan bertentangan dengan Angular. Masalah ini ada karena Angular memperluas objek yang ada saat ini dengan menambahkan metode. Dengan menambahkan awalan "$", Angular mempertahankan namespace spesifik, sehingga pengembang dan pengembang sudut yang menggunakan Angular dapat hidup secara harmonis.