Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang sintaks AngularJS (bersambung)_AngularJS

Penjelasan terperinci tentang sintaks AngularJS (bersambung)_AngularJS

WBOYasal: 2016-05-16 16:18:13942semak imbas

atribut src dan href

Dalam Angularjs, src hendaklah ditulis sebagai ng-src dan href hendaklah ditulis sebagai ng-href Contohnya:

Salin kod Kod adalah seperti berikut:

Sesetengah teks

Ekspresi

Anda boleh melakukan operasi matematik mudah, operasi perbandingan, operasi Boolean, operasi bitwise, tatasusunan rujukan, notasi objek, dsb. dalam templat Walaupun kita boleh melakukan banyak perkara dengan ungkapan, ungkapan menggunakan penterjemah tersuai of Angular) dan bukannya menggunakan fungsi eval() Javascript, jadi ia mempunyai batasan yang lebih besar.
Walaupun ungkapan di sini lebih ketat daripada Javascript dalam banyak cara, mereka lebih bertolak ansur dengan tidak ditentukan dan batal Jika ralat ditemui, templat hanya memaparkan apa-apa dan bukannya membuang ralat NullPointerException. Contohnya:

Salin kod Kod adalah seperti berikut:

{{computer() /10 }}
 //Walaupun ia sah, ia meletakkan logik perniagaan ke dalam templat ini

Asingkan tanggungjawab UI dan pengawal

Pengawal terikat kepada serpihan DOM tertentu dan serpihan ini ialah kandungan yang perlu mereka uruskan. Terdapat dua cara utama untuk mengaitkan pengawal ke nod DOM Salah satunya adalah dengan mengisytiharkannya dalam templat melalui ng-controller. Kita boleh mencipta pengawal bersarang Mereka boleh berkongsi model dan fungsi data melalui struktur warisan Bersarang sebenar berlaku pada objek $scope melalui mekanisme pewarisan primitif dalaman, $skop objek pengawal induk akan dihantar ke $skop dalaman. skop (semua sifat, termasuk fungsi). Contohnya:

Salin kod Kod adalah seperti berikut:

...

Gunakan $scope untuk mendedahkan data model

Anda boleh mencipta sifat $scope secara eksplisit, contohnya $scope.count = 5. Anda juga boleh membuat model data secara tidak langsung melalui templat itu sendiri.

Dengan ungkapan. Contohnya

Salin kod Kod adalah seperti berikut:

Tetapkan kiraan kepada tiga

Gunakan ng-model pada item borang

Sama seperti ungkapan, parameter model yang dinyatakan pada model ng juga berfungsi dalam pengawal luar. Satu-satunya perbezaan ialah ini mewujudkan pengikatan dua hala antara item borang dan model yang ditentukan.

Gunakan jam tangan untuk memantau perubahan dalam model data

Tandatangan fungsi $watch ialah: $watch(watchFn,watchAction,deepWatch)
watchFn ialah rentetan dengan ungkapan atau fungsi Sudut yang mengembalikan nilai semasa model data yang dipantau. watchAction ialah fungsi atau ungkapan yang dipanggil apabila watchFn berubah. Tandatangan fungsinya ialah:
function(newValue,oldValue,scope) deepWatch Jika ditetapkan kepada benar, parameter Boolean pilihan ini akan mengarahkan Angular untuk menyemak sama ada setiap sifat objek yang dipantau telah berubah. Anda boleh menggunakan parameter ini jika anda ingin memantau elemen dalam tatasusunan, atau semua sifat pada objek, dan bukannya memantau satu nilai. Ambil perhatian bahawa Angular perlu melintasi tatasusunan atau objek Jika koleksi besar, operasi akan menjadi rumit dan berat.

Fungsi $watch akan mengembalikan fungsi Apabila anda tidak perlu menerima pemberitahuan perubahan, anda boleh menggunakan fungsi yang dikembalikan ini untuk log keluar dari monitor.
Jika kita perlu memantau harta dan kemudian log keluar daripada pemantauan, kita boleh menggunakan kod berikut: var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

Kod contoh adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

Keranjang Beli-belah Anda

上面的watch存在性能问题，calculateTotals函数执行了6次，其中三次是因为循坏，每次，都當据。
下面是改良后的代码

复制代码代码如下:

Keranjang Beli-belah Anda

对于大型的itms数组来说，如果每次在Angular显示页面时只重新计算bill属性，連徿佈性，連么住。创建一个带有watchFn的$watch函数，我们可以实现这一点。

复制代码代码如下:

$scope.$watch(

var totalCart = function() {

            var jumlah = 0;

untuk (var i=0,len=$scope.items.length;i
                         jumlah = jumlah $skop.item[i].harga * $skop.item[i].kuantiti;

                }

                      $scope.bill.totalcart = jumlah;

$scope.bill.discount = jumlah > 10 :0;

$scope.bill.subtotal = jumlah - $scope.bill.discount;

            });

Pantau berbilang perkara

Jika anda ingin memantau berbilang sifat atau objek dan melaksanakan fungsi apabila mana-mana daripadanya berubah, anda mempunyai dua pilihan asas:

Pantau nilai penggabungan sifat ini

Letakkannya dalam tatasusunan atau objek dan hantar nilai kepada parameter deepWatch

Arahan masing-masing:
Dalam kes pertama, jika terdapat objek dalam skop anda, ia mempunyai dua sifat a dan b Apabila kedua-dua sifat ini berubah, fungsi callMe() anda boleh memantau kedua-dua sifat ini pada masa yang sama $scope.$watch('things.a things.b',callMe(...));
Apabila senarai itu sangat panjang, anda perlu menulis fungsi untuk mengembalikan nilai yang digabungkan.

Dalam kes kedua, anda perlu memantau semua sifat objek. Anda boleh melakukan ini:

Salin kod Kod adalah seperti berikut:

$scope.$watch('things',callMe(...),true);

Gunakan modul untuk mengatur kebergantungan

pembekal(nama,Objek ATAU pembina()) Penerangan: Perkhidmatan boleh dikonfigurasikan yang mencipta perbandingan logik yang kompleks. Jika anda lulus Objek sebagai parameter, maka objek Objek mesti mempunyai fungsi bernama $get, yang perlu mengembalikan nama perkhidmatan. Jika tidak, angularjs akan berfikir bahawa apa yang anda luluskan ialah pembina, dan memanggil pembina akan mengembalikan objek contoh perkhidmatan.
factory(name,$get Function()) Penerangan: Perkhidmatan yang tidak boleh dikonfigurasikan, logik penciptaan agak rumit. Anda perlu menentukan fungsi yang, apabila dipanggil, akan mengembalikan contoh perkhidmatan. Ia boleh dilihat sebagai pembekal(nama,{$get:$getFunction()}).
service(name,constructor()) Perkhidmatan yang tidak boleh dikonfigurasikan, mencipta logik agak mudah. Sama seperti parameter pembina fungsi pembekal di atas, Angular boleh mencipta contoh perkhidmatan dengan memanggilnya.

Contoh penggunaan kilang modul

Salin kod Kod adalah seperti berikut:

Keranjang Beli-belah Anda