AngularJS arahan terbina dalam_AngularJS

Arahan

, saya memahaminya sebagai cara untuk AngularJS mengendalikan elemen HTML.
Memandangkan langkah pertama dalam pembelajaran AngularJS ialah menulis arahan terbina dalam ng-app untuk menunjukkan bahawa nod ini ialah nod akar aplikasi, arahan itu sudah biasa.

Blog ini merekodkan secara ringkas beberapa arahan terbina dalam Mari kita gunakannya dahulu, dan kemudian bercakap tentang beberapa perkara yang menarik.

Arahan terbina dalam

Semua arahan terbina dalam diawali dengan ng. Ia tidak disyorkan untuk arahan tersuai untuk menggunakan awalan ini untuk mengelakkan konflik.
Mulakan dengan beberapa arahan terbina dalam biasa.
Mari kita senaraikan beberapa arahan terbina dalam utama dan bincangkan secara ringkas tentang isu skop.

ng-model

Mengikat kawalan borang kepada sifat skop semasa nampaknya tidak betul.
Tetapi jangan risau tentang perkataan buat masa ini, ia mudah difahami apabila menggunakannya, contohnya:

Salin kod Kod adalah seperti berikut:

{{someModel.someProperty}}

ng-init

Arahan ini akan memulakan skop dalaman apabila dipanggil.
Perintah ini biasanya muncul dalam aplikasi yang agak kecil, seperti memberikan demo atau sesuatu...

Salin kod Kod adalah seperti berikut:

Saya seorang {{pekerjaan}}

Selain ng-init, kami mempunyai lebih banyak pilihan dan lebih baik.

ng-app

Setiap kali anda menggunakan AngularJS, anda tidak boleh melakukannya tanpa arahan ini, $rootScope.
Elemen yang mengisytiharkan ng-app akan menjadi titik permulaan $rootScope, dan $rootScope ialah punca rantaian skop Ia biasanya diisytiharkan dalam
Dengan kata lain, semua skop di bawah akar boleh mengaksesnya.
Walau bagaimanapun, tidak disyorkan untuk menggunakan $rootScope secara berlebihan, jika tidak, pembolehubah global akan berada di mana-mana, yang akan menjadi tidak cekap dan sukar untuk diurus.
Berikut ialah contoh:

Salin kod Kod adalah seperti berikut:

{{ someProperty }}


var myApp = angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.someProperty = 'hello komputer';
});

pengawal ng

Kami menggunakan arahan ini untuk memasang pengawal pada elemen DOM.
Pengawal? Memang bagus untuk memahaminya secara literal, jadi mengapa kita memerlukan pengawal? Ingat bahawa dalam AngularJS 1.2.x, anda boleh menentukan pengawal seperti ini...

Salin kod Kod adalah seperti berikut:

fungsi ohMyController($skop) {
//...
}

Kaedah ini dilarang dalam AngularJS 1.3.x, kerana kaedah ini akan membuatkan pengawal terbang ke seluruh langit, dan mustahil untuk membezakan tahap semuanya digantung pada $rootScope...

ng-controller mesti mempunyai ungkapan sebagai parameter Selain itu, $scope digunakan untuk mewarisi kaedah dan sifat $scope unggul, termasuk $rootScope.
Berikut adalah contoh mudah Moyang tidak boleh mengakses skop kanak-kanak.

Salin kod Kod adalah seperti berikut:

{{ ancestorName }}
{{ Nama anak }}

             {{ ancestorName }}
             {{ Nama anak }}

var myApp = angular.module('myApp', [])
.controller('ChildController', function($skop) {
$scope.childName = 'child';
})
.controller('AncestorController', function($skop) {
$scope.ancestorName = 'nenek moyang';
});

Masalah skop melampaui itu. Mari kita ketepikan buat masa ini dan teruskan melihat arahan terbina dalam yang lain.

ng-form

Pada mulanya saya tidak faham mengapa terdapat arahan borang, tetapi teg

Mengambil pengesahan borang sebagai contoh, terdapat sekeping kod ini dalam artikel sebelumnya:

Salin kod Kod adalah seperti berikut:

Iaitu, butang hantar dilumpuhkan apabila status borang adalah $invalid.
Jika senario adalah lebih rumit sedikit, sebagai contoh, borang induk mempunyai berbilang subborang dan borang induk boleh diserahkan apabila tiga pengesahan dalam subborang lulus.
Walau bagaimanapun, tidak boleh bersarang.
Memandangkan senario ini, kami menggunakan arahan bentuk ng untuk menyelesaikan masalah ini.
Contohnya:

Salin kod Kod adalah seperti berikut:

Nama:

Nombor ID:

Nama penjaga:

Nombor ID Penjaga:

serahkan semua

ng-kurang upaya

Untuk atribut seperti ini yang berkesan selagi ia muncul, kita boleh menjadikannya berkesan dengan mengembalikan ungkapan benar/salah dalam AngularJS.
Lumpuhkan medan input borang.

Salin kod Kod adalah seperti berikut:

1 1=?

ng-baca sahaja

Tetapkan medan input borang kepada baca sahaja melalui ungkapan mengembalikan nilai benar/salah.
Sebagai contoh, ia akan menjadi baca sahaja selepas 3 saat.

Salin kod Kod adalah seperti berikut:

.run(function($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$masa tamat(fungsi(){
           $rootScope.stopTheWorld = benar;
},3000)
})

ng-disemak

Ini adalah untuk , seperti...

Salin kod Kod adalah seperti berikut:

ng-dipilih

digunakan untuk dalam , contoh:

Salin kod Kod adalah seperti berikut:

Saya Jurutera Timbunan Penuh


Front-End
Back-End
Full Stack !!!

ng-show/ng-hide

Tunjukkan/sembunyikan elemen HTML berdasarkan ungkapan Sila ambil perhatian bahawa ia disembunyikan, bukan dialih keluar daripada DOM, contohnya:

Salin kod Kod adalah seperti berikut:

1 1=2

Anda tidak boleh melihat saya.

ng-ubah

Ia bukan padaXXX seperti HTML, tetapi ng-XXX.
Digunakan bersama ng-model, ambil ng-change sebagai contoh:

Salin kod Kod adalah seperti berikut:

{{ calc.result }}

atau suka ng-options

{{}}

Malah, ini juga merupakan satu arahan. Ia mungkin berasa serupa dengan ng-bind, tetapi ia mungkin dilihat apabila pemaparan halaman perlahan.
Selain itu, prestasi {{}} jauh lebih rendah daripada ng-bind, tetapi ia sangat mudah digunakan.

ng-bind

Gelagat ng-bind adalah serupa dengan {{}}, kecuali kita boleh menggunakan arahan ini untuk mengelakkan FOUC (Flash Of Unrendered Content), iaitu kelipan yang disebabkan oleh penyahpadanan.

ng-jubah

ng-cloak juga boleh menyelesaikan FOUC untuk kita. ng-cloak akan menyembunyikan elemen dalaman sehingga laluan memanggil halaman yang sepadan.

ng-jika

Jika ungkapan dalam ng-if adalah palsu, elemen yang sepadan akan dialih keluar daripada DOM dan bukannya disembunyikan, tetapi apabila memeriksa elemen anda dapat melihat bahawa ungkapan itu menjadi ulasan.
Jika fasa disembunyikan, anda boleh menggunakan ng-hide.

Salin kod Kod adalah seperti berikut:

Elemen tidak boleh disemak

Boleh ditapis

ng-suis

Digunakan sahaja, ia tidak bermakna Ini adalah contoh:

Salin kod Kod adalah seperti berikut:

0

1

2

3

ng-ulang

Saya tidak faham mengapa ia tidak dipanggil iterate Secara ringkasnya, ia merentasi koleksi dan menjana tika templat untuk setiap elemen Beberapa atribut khas boleh digunakan dalam skop setiap kejadian, seperti berikut:

Salin kod Kod adalah seperti berikut:

$indeks
$first
$terakhir
$tengah
malah
ganjil

Tidak perlu menjelaskan, mudah untuk mengetahui kegunaannya. Berikut ialah contoh:

Salin kod Kod adalah seperti berikut:

• {{char.alphabet}}

ng-href

Pada mulanya saya membuat model ng dalam medan teks, dan kemudian menulis
Malah, tiada perbezaan antara href dan ng-href, jadi kita boleh mencuba ini:

Salin kod Kod adalah seperti berikut:

• {{linkText}}


• Ia boleh diklik, tetapi ia mungkin bukan alamat yang betul

.run(function($rootScope, $timeout) {
$rootScope.linkText = 'Belum dimuatkan lagi, anda tidak boleh klik';
$masa tamat(fungsi() {
          $rootScope.linkText = 'Sila klik'
          $rootScope.myHref = 'http://google.com';
}, 2000);
})

ng-src

Hampir sama, iaitu, jangan muatkan sumber sebelum ungkapan berkuat kuasa.
Contoh (ps: gambar bagus! ):

Salin kod Kod adalah seperti berikut:

.run(function($rootScope, $timeout) {
$masa tamat(fungsi() {
          $rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})

ng-class

Tukar gaya kelas secara dinamik menggunakan objek dalam skop, contohnya:

Salin kod Kod adalah seperti berikut:

.merah {warna latar: merah;}
.biru {warna latar: biru;}

Dapatkan Masa!

Nombor ialah: {{ x }}

.controller('CurTimeController', function($skop) {
$scope.getCurrentSecond = function() {
          $scope.x = New Date().getSeconds();
};
})

Itu sahaja kandungan artikel ini, saya harap anda semua menyukainya.