Tutorial ini menggunakan versi AngularJS: 1.5.3
AngularJS Github: https://github.com/angular/angular.js/
Alamat unduhan AngularJS: https://angularjs.org/
Abstrak: Arahan (instruksi) Penulis percaya bahwa itu adalah salah satu fungsi AngularJ yang sangat kuat dan berguna. Ini setara dengan menulis elemen DOM khusus atau atribut kelas atau atribut atribut untuk kami, dan bukan hanya itu, Anda juga dapat memanipulasi ruang lingkup, mengikat acara, mengubah gaya, dll. Atas dasarnya. Melalui arahan ini, kita dapat merangkum banyak instruksi publik, seperti instruksi paging, instruksi penyelesaian otomatis, dll. Maka, Anda hanya perlu menulis satu baris kode di halaman HTML untuk mencapai banyak fungsi yang kuat. Secara umum, arahan perlu digunakan untuk memiliki skenario berikut:
1. Jadikan HTML Anda lebih semantik dan Anda tidak perlu mempelajari kode dan logika secara mendalam untuk mengetahui logika umum halaman.
2. Abstrak Komponen khusus dan gunakan kembali di tempat lain.
1. Definisi Petunjuk dan Metode Penggunaannya
Definisi arahan AngularJS kira -kira sebagai berikut
angular.module ("app", []). Directive ("DirectiveName", function () {return {// Tentukan dengan mengatur item};})Petunjuk dapat ditempatkan di nama elemen, atribut, kelas, dan komentar. Berikut ini adalah cara yang setara untuk mengutip Mydir, arahan. (Tetapi banyak arahan terbatas pada penggunaan "properti")
<span <span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span><span style="font-family: Arial, Helvetica, sans-serif;">="exp"></span>//Properties</span> <span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>></<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>></<span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span>></<span style="font-family: Arial, Helvetica, sans-serif; "> arahan-nama </span>> // elemen <!-arahan: <span style =" font-family: arial, helvetica, sans-serif; "> arahan-nama </span> <span style =" font-family: arial, helvetica, sans-serif; "> exp-span </span> note, helvetica, sans-serif;"> exp-span </span> note>
Contoh berikut:
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {batasi: 'e', template: '<ver> hai saya lin bingwen ~~~ </div>', ganti: true};}); </script> </html>hasil:
Di bawah ini adalah versi terperinci arahan
var mymodule = angular.module (...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, template: '<div></div>', templateUrl: 'directive.html', replace: false, transclude: false, restrict: 'A', scope: false, compile: function compile(tElement, tAttrs, transclude) { return { Pre: function prelink (lingkup, ielement, iattrs, controller) {...}, post: function postlink (lingkup, ielement, iattrs, controller) {...}}, tautan: fungsi postlink (scope, ielement, iAttrs) {...} eB;2. Interpretasi konten perintah arahan
Anda dapat melihat bahwa ia memiliki 8 konten
1. Restrict
(String) Parameter opsional menunjukkan bentuk instruksi yang dinyatakan dalam DOM; Nilai -nilainya adalah: e (elemen), a (atribut), c (kelas), m (notasi), dan nilai default adalah a; Tentu saja, dua juga dapat digunakan bersama, seperti EA. Representasi dapat berupa elemen atau atribut.
[html] Lihat Fragmen Kode Tampilan Salin Plain
E (elemen): <ElectiveVerame> </Ear secrainame>
A (properti): <diveDViveMename = 'Expression'> </div>
C (kelas): <div class = 'DirectiveVerame'> </div>
M (note): <-Directive: DirectiveName Expression->
Secara umum, E/A/C lebih sering digunakan.
2. Prioritas
(angka), parameter opsional, tentukan prioritas instruksi. Jika ada beberapa instruksi pada DOM tunggal, prioritas yang lebih tinggi akan dieksekusi terlebih dahulu;
3. terminal
(Boolean), parameter opsional, dapat diatur ke benar atau salah. Jika diatur ke True, instruksi lain dengan prioritas lebih rendah dari instruksi ini akan tidak valid dan tidak akan dipanggil (yang dengan prioritas yang sama masih akan dieksekusi)
4.template (string atau fungsi) Parameter opsional, yang bisa:
(1) Sepotong teks html
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {batasi: 'e', template: '<div> <h1> hai saya lin bingwen ~~~ </h1> </div>', ganti: true};}); </script> </html>(2) Suatu fungsi dapat menerima dua parameter telement dan tattrs
di mana telement mengacu pada elemen yang menggunakan arahan ini, dan tattrs adalah atribut dari instance, yang merupakan koleksi (objek) yang terdiri dari semua atribut pada elemen, seperti:
<Hello-world2 title = 'I Am the Second Directive'> </hello-world2>
Judulnya adalah atribut pada tato
Mari kita lihat apa yang terjadi saat template adalah fungsi
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> <hello-world2 title = 'I Am the Second Directive'> </hello-world2> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {batasi: 'e', template: '<div> <h1> hai saya lin bingwen ~~~ </h1> </div>', ganti: true};}); app.directive ("helloWorld2", function () {return {restrict: 'eac', template: function (telement, tattrs) {var _html = ''; _html += '<v>' +'hello' +tattrs.title +'</div>'; return _HT _HT; </script> </html>hasil:
Anda dapat melihat bahwa bidang judul dalam tag di hello-world2 juga digunakan dalam arahan.
5.templateUrl (string atau fungsi), parameter opsional, bisa
(1) String yang mewakili jalur file HTML
(2) Suatu fungsi dapat menerima dua parameter telement dan tattrs (kira -kira sama seperti di atas)
Catatan: Selama pengembangan lokal, Anda perlu menjalankan server, jika tidak menggunakan TemplateUrl akan menyebabkan kesalahan skrip permintaan silang (CORS). Karena memuat templat HTML dimuat secara asinkron, memuat sejumlah besar templat akan memperlambat situs web. Inilah trik, yaitu untuk menyimpan template terlebih dahulu
Anda dapat memuat halaman indeks Anda dan memasukkan kode berikut sebagai bagian dari halaman Anda.
<script type = 'text/ng-template' id = 'hello.html'> <dv> <h1> hai saya lin bingwen ~~~ </h1> </div> </cript>
Atribut ID di sini diatur pada TemplateUrl.
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {restrict: 'e', templateUrl: 'hello.html', ganti: true};}); </script> <script type = 'text/ng-template' id = 'hello.html'> <div> <h1> hai saya lin bingwen ~~~ </h1> </div> </script> </html>Hasil output:
Cara lain untuk cache adalah:
app.run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> hai saya lin bingwen ~~~ </h1> </div>");}]);Contoh penggunaan adalah sebagai berikut:
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('helloWorld', function () {return {restrict: 'e', templateUrl: 'hello.html', ganti: true};}); app.run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> hai saya lin bingwen ~~~ </h1> </div>");}]); </script> </html>hasil:
Bahkan, metode pertama lebih baik, akan lebih cepat untuk menulis. Penulis memiliki metode terbanyak dan pertama untuk menulis, yang secara langsung termasuk dalam SCPRIT.
6. Ubah
(Nilai boolean), nilai defaultnya salah. Saat diatur ke true, mari kita lihat contoh berikut (bandingkan contoh yang diberikan dalam templat)
Saat mengganti itu benar, tag Hello-World tidak ada lagi di sana, jika tidak, itu ada.
7.Scope
(1) Nilai default salah. Menunjukkan warisan ruang lingkup induk;
(2) Benar. Menunjukkan mewarisi ruang lingkup induk dan membuat ruang lingkup Anda sendiri (ruang lingkup anak);
(3) {}. Menunjukkan menciptakan ruang lingkup isolasi yang sama sekali baru;
7.1 Pertama, mari kita pahami mekanisme warisan lingkup. Mari kita gunakan perintah NG-Controller sebagai contoh.
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> Pengantar AngularJS </itement> <script type = "Text/JavaScript" SRC = "./ 1.5.3/Angular.Min.js"> </javascript "src =". ng-controller = 'MainController'> ayah: {{name}} <input ng-model = "name"/> <Div My-Directive> </div> </div> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.controller ('mainController', function ($ scope) {$ scope.name = 'lin bingwen';}); app.directive ('mydirective', function () {return {batasi: 'ea', scope: false, template: '<v> son: {{name}} <input ng-model = "name"/> </div>'};})); </script> </html>Selanjutnya, kami menggunakan contoh sederhana dan jelas untuk menggambarkan perbedaan dalam nilai lingkup:
Lingkup: Salah
Lingkup: Benar
cakupan:{}
Ketika salah, putra mewarisi nilai Bapa dan mengubah nilai Bapa, dan nilai putra juga berubah, dan sebaliknya. (Warisan tidak terisolasi)
Ketika benar, anak mewarisi nilai ayah dan mengubah nilai ayah. Nilai putra berubah sesuai, tetapi ketika nilai putra berubah, nilai ayah tetap tidak berubah. (Warisan dan isolasi)
Ketika {}, nilai Bapa tidak diwarisi, jadi nilai putra kosong. Mengubah nilai salah satu pihak tidak dapat mempengaruhi nilai pihak lain. (Tidak ada warisan dan isolasi)
Kiat: Mengisolasi ruang lingkup adalah pilihan yang baik ketika Anda ingin membuat komponen yang dapat digunakan kembali. Dengan mengisolasi lingkup, kami memastikan bahwa arahan 'mandiri' dan dapat dengan mudah dimasukkan ke dalam aplikasi HTML apa pun, dan pendekatan ini mencegah ruang lingkup induk dari terkontaminasi;
7.2 Lingkup Isolasi Anda dapat mengakses sifat -sifat lingkup induk melalui kebijakan pengikatan.
Arahan menyediakan tiga cara untuk berinteraksi dengan tempat -tempat di luar isolasi saat menggunakan ruang lingkup isolasi. Ketiganya
@ Ikat atribut ruang lingkup lokal dengan nilai properti dari simpul DOM saat ini. Hasilnya selalu merupakan string, karena atribut DOM adalah string.
& Menyediakan cara untuk menjalankan ekspresi dalam konteks ruang lingkup induk. Jika nama ATTRI tidak ditentukan, nama atribut adalah nama lokal yang sama.
= Buat ikatan dua arah antara atribut ruang lingkup lokal dan nama atribut lingkup induk melalui nilai atribut atrim arahan.
@ atribut lingkup lokal
@ Metode Atribut lokal digunakan untuk mengakses nilai string yang ditentukan oleh lingkungan eksternal directive, terutama mengikat nilai string eksternal melalui atribut tag di mana arahan berada. Ikatan ini adalah satu arah, yaitu perubahan ikatan dari ruang lingkup induk. Sifat -sifat ruang lingkup dalam arahan akan berubah secara serempak, sedangkan perubahan ikatan dalam ruang lingkup diisolasi, dan ruang lingkup induk tidak diketahui.
Contoh berikut: Directive menyatakan bahwa jenis lingkup tidak terisolasi, dan menggunakan atribut nama @ pengikat, dan menggunakan atribut nama untuk mengikat atribut dalam ruang lingkup induk dalam arahan. Saat mengubah nilai atribut dalam ruang lingkup induk, Directive akan memperbarui nilai secara serempak. Saat mengubah nilai properti dari nilai properti lingkup lingkup arahan, ruang lingkup induk tidak dapat memperbarui nilai secara serempak.
Kode JS:
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> Pengantar AngularJS </itement> <script type = "Text/JavaScript" SRC = "./ 1.5.3/Angular.Min.js"> </javascript "src =". ng-controller="myController"> <div> <div> Parent scope: <div>Say: {{name}}<br>Change the name of the parent scope: <input type="text" value="" ng-model="name"/></div> </div> <div>isolated scope: <div isolated-directive name="{{name}}"></div> </div> <ver> Lingkup terisolasi (tidak menggunakan lingkup induk {{name}}): <Div terisolasi-name = "name"> </div> </div> </div> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.controller ("myController", function ($ scope) {$ scope.name = "Hello world";}). Directive ("terisolasiDrirective", function () {return {scope: {name: "@"}, template: 'say: {{name}} {name: "@"}, Template:' Say: {{name}} {name: "@" ng-model = "name"> '};}); </script> </html>Hasil: Efek awal halaman
Efek animasi:
Anda dapat melihat bahwa konten pada ruang lingkup induk telah berubah, dan ruang lingkup anak telah berubah pada saat yang sama. Dan konten pada subscope telah berubah. Itu tidak mempengaruhi konten pada ruang lingkup induk!
= atribut ruang lingkup lokal
= Buat ikatan dua arah antara atribut ruang lingkup lokal dan nama atribut lingkup induk melalui nilai atribut atrim arahan.
Artinya, ketika Anda menginginkan properti terikat dua arah, Anda dapat menggunakan = untuk memperkenalkan properti eksternal. Apakah mengubah ruang lingkup induk atau mengisolasi properti dalam ruang lingkup, ruang lingkup induk dan ruang lingkup isolasi akan memperbarui nilai properti pada saat yang sama karena mereka adalah hubungan terikat dua arah.
Kode contoh:
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> Pengantar AngularJS </itement> <script type = "Text/JavaScript" SRC = "./ 1.5.3/Angular.Min.js"> </javascript "src =". ng-controller = "mycontroller"> <div> Lingkup induk: <div> katakan: {{user.name}} <br> Ubah nama ruang lingkup induk: <input type = "text" value = "" Ng-Model = "userbase.name"/</Div> </Div> </Diver "divelasi: Userbase.name"/</Div> </Div> </Div> Diveled: Userbase.name: </div> </div> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.controller ("myController", function ($ scope) {$ scope.userbase = {name: 'hello', id: 1};}). Directive ("isolatedDirective", function () {return {scope: {User: "="}, template: '{{{{{{namanya: "=" <input type = "Buttom" value = "" ng-Model = "user.name"/> '}}) </script> </html>Memengaruhi:
Anda dapat melihat bahwa konten pada ruang lingkup induk dan ruang lingkup anak selalu sama!
& atribut ruang lingkup lokal
Metode & Metode menyediakan cara untuk secara langsung menjalankan ekspresi dalam konteks ruang lingkup induk. Ekspresi ini bisa menjadi fungsi.
Misalnya, ketika Anda menulis arahan, ketika pengguna mengklik tombol, arahan ingin memberi tahu pengontrol, pengontrol tidak dapat mengetahui apa yang terjadi di arahan. Mungkin Anda bisa melakukannya dengan menggunakan siaran acara di Angular, tetapi Anda harus menambahkan metode mendengarkan acara ke pengontrol.
Cara terbaik adalah dengan memungkinkan Petunjuk untuk melewati fungsi dalam ruang lingkup induk. Ketika ada tindakan dalam Petunjuk yang perlu diperbarui ke ruang lingkup induk, sepotong kode atau fungsi dapat dieksekusi dalam konteks lingkup induk.
Contoh berikut mengeksekusi fungsi ruang lingkup induk dalam arahan.
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> Pengantar AngularJS </itement> <script type = "Text/JavaScript" SRC = "./ 1.5.3/Angular.Min.js"> </javascript "src =". ng-controller="myController"> <div>Parent scope: <div>Say: {{value}}</div> </div> <div>Isolated scope: <div isolated-directive action="click()"></div> </div> </div> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller ("mycontroller", function ($ scope) {$ scope.value = "hello world"; $ scope.click = function () {$ scope.value = math.random ();};}). Directive ("isolatedDirective", function () {return {{{"{" {"{" {"{" {"{" {"{" {"{" {"{{{" {" value = "Eksekusi metode definisi lingkup induk dalam arahan" ng-click = "action ()"/> '}}) </script> </html>Memengaruhi:
Ada banyak isi instruksi, mari kita bicara tentang transclude, compline, tautan, dan pengontrol.
8. Transclude
Jika Anda tidak ingin konten di dalam arahan diganti dengan templat, Anda dapat mengatur nilai ini menjadi true. Secara umum, perlu digunakan dengan arahan ngtransclude. Misalnya: Template: "<div> halo setiap <div ng-transclude> </div> </div>", pada saat ini, konten di dalam instruksi akan tertanam dalam div NG-Transclude. Artinya, itu menjadi <div> halo setiap <div> ini adalah konten di dalam perintah </div> </div>. Nilai defaultnya salah; Opsi konfigurasi ini memungkinkan kami untuk mengekstrak konten yang terkandung dalam elemen arahan dan kemudian menempatkannya di posisi tertentu dalam templat arahan. Saat Anda mengaktifkan transclude, Anda dapat menggunakan NG-Transclude untuk menunjukkan di mana harus menempatkan konten yang diterjemahkan
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <div sidebox> <ul> <li>First Link </li> <li> Tautan kedua </li> </ul> </div> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('sidebox', function () {return {restrict: 'ea', scope: {title: '@'}, translate: true, template: '<div>/ <viV>/ <h2> {{title}} </h2>/ <span ng-transclude>/ </ span>/ div>/ </ h2>/ <span ng-transclude>/ </ span>/ div> </script> </html>hasil:
Saat transclude: false,
Jika instruksi menggunakan parameter TransClude, pengontrol tidak dapat memantau perubahan dalam model data secara normal. Disarankan untuk menggunakan layanan $ watch di fungsi tautan.
9.Controller
Itu bisa berupa string atau fungsi.
Jika itu adalah string, gunakan string sebagai nama pengontrol untuk menemukan konstruktor pengontrol yang terdaftar di aplikasi.
angular.module ('myapp', []) .directive ('mydirective', function () {membatasi: 'a', // controller: 'somecontroller'}) // tempat lain dalam aplikasi dapat berupa file yang sama atau file lain yang terkandung dalam index.html angular.module ('myapp'). Controlloller lain $ attrs, $ transclude) {// Logika pengontrol ditempatkan di sini}); Ini juga dapat didefinisikan sebagai fungsi anonim secara langsung di dalam instruksi, dan kami dapat menyuntikkan layanan apa pun di sini ($ log, $ timeout, dll.) [Html] Lihat Plain Copy View Code Slice pada kode yang diturunkan ke kode saya Slice angular.module, $ myApp ', []) .Direktif (' function ', function () {' myapp ', [], controller (' function ', function () {myApp', ',' function: 'function:' function: 'function:' function: a function: a function: {function: 'myappe: $ transclude) {// Logika pengontrol ditempatkan di sini}});Ada juga beberapa layanan khusus (parameter) yang dapat disuntikkan
(1) $ SCOPE, ruang lingkup yang terkait dengan elemen arahan
(2) $ elemen, elemen yang sesuai dengan instruksi saat ini
(3) $ attrs, objek yang terdiri dari atribut elemen saat ini
(4) $ transclude, fungsi tautan tertanam, sebenarnya fungsi yang dieksekusi yang digunakan untuk mengkloning elemen dan mengoperasikan DOM
Catatan: Kecuali digunakan untuk mendefinisikan beberapa perilaku yang dapat digunakan kembali, umumnya tidak dianjurkan di sini.
Fungsi pengontrol dan tautan dari instruksi (untuk dibahas nanti) dapat dipertukarkan. Perbedaannya adalah bahwa pengontrol terutama digunakan untuk memberikan perilaku yang dapat digunakan kembali di antara instruksi, tetapi fungsi tautan tautan hanya dapat menentukan perilaku dalam instruksi internal saat ini dan tidak dapat digunakan kembali di antara instruksi.
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Introduction to AngularJS</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <hello mycolor ="red">I am Lin Bingwen ~~~ </hello> </body> <script type = "text/javascript"> var app = angular.module ('myapp', []); app.directive ('hello', function () {return {restrict: 'ea', transclude: true, // perhatikan bahwa itu harus diatur ke true controller: function ($ scope, $ element, $ attrs, $ transclude, $ log) {// di sini Anda dapat menyuntikkan layanan yang Anda ingin injeksi $ transclude (function (clone) {var a = ') (peR' p> {var ') (peR' p> {var a = {var a = {var a = a. $ attrs.mycolor); </script> </html>Hasil output:
Dan output Halo semuanya di bawah konsol
Mari kita lihat $ transclude (); Di sini, ini dapat mengambil dua parameter, yang pertama adalah $ scope, scope, dan yang kedua adalah fungsi panggilan balik dengan klon parameter. Dan klon ini sebenarnya adalah konten tertanam (dibungkus dengan jQuery), dan Anda dapat melakukan banyak operasi DOM di atasnya.
Cara termudah adalah
<script> angular.module('myApp',[]).directive('mySite', function () { return { restrict: 'EA', transclude: true, controller: function ($scope, $element,$attrs,$transclude,$log) { var a = $transclude(); //$transclude() is the embedded content $element.append(a); } }; }); </script>Catatan: Menggunakan $ TransClude akan menghasilkan ruang lingkup baru.
Secara default, jika kita secara sederhana dan praktis menggunakan $ transclude (), maka ruang lingkup default adalah ruang lingkup yang dihasilkan oleh $ transclude
Tetapi jika kita menggunakan $ transclude ($ scope, function (clone) {}), maka ruang lingkup adalah ruang lingkup arahan
Kemudian pertanyaannya muncul lagi. Bagaimana jika kita ingin menggunakan cakupan induk
$ SCOPE. $ Parent dapat digunakan
Demikian pula, jika Anda menginginkan ruang lingkup baru, Anda juga dapat menggunakan $ scope. $ Parent.new ();
10.Controlleras
Opsi ini digunakan untuk mengatur alias pengontrol Anda
Di masa lalu, kita sering menggunakan metode ini untuk menulis kode:
angular.module("app",[]) .controller("demoController",["$scope",function($scope){ $scope.title = "angualr"; }]) <div ng-app="app" ng-controller="demoController"> {{title}} </div>Kemudian, AngularJS1.2 membawakan kami gula sintaks baru, jadi kami dapat menulisnya seperti ini
angular.module ("app", []) .controller ("Democontroller", [function () {this.title = "angualr";}]) <div ng-app = "app" ng-controller = "democontroller as demo"> {{demo.title} </democontroller as demo "> {{demo.title} </diver </diver>Kami juga dapat menulis ini di perintah
<script> angular.module ('myApp', []). Directive ('mysite', function () {return {batasi: 'ea', transclude: true, controller: 'somecontroller', controlleras: 'MainController' //..konfigurasi lainnya};}); </script>11.Require (String atau Array)
Sebuah string mewakili nama instruksi lain, yang akan digunakan sebagai parameter keempat dari fungsi tautan. Kami dapat memberikan contoh untuk menggambarkan penggunaan spesifik. Misalkan kita harus menulis dua instruksi sekarang. Ada banyak metode yang tumpang tindih dalam fungsi tautan tautan (fungsi tautan akan dibahas nanti). Pada saat ini, kita dapat menulis metode berulang ini dalam pengontrol instruksi ketiga (pengontrol juga disebutkan di atas untuk memberikan perilaku penggunaan kembali antara instruksi). Kemudian dalam dua instruksi ini, memerlukan instruksi dengan bidang pengontrol (instruksi ketiga).
Akhirnya, Anda dapat merujuk pada metode yang tumpang tindih ini melalui parameter keempat fungsi tautan tautan.
<! Doctype html> <html ng-app = "myapp"> <head> <script src = "http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"> </script> </head> <gody> <tody-directive> <inner-directive> </script> </head> <gody> <touthout-directive> <inner-directive> </script> </head> <gody> <pouthout-directive> <inner-directive> <inner-directive> </script> </adep <inter-disrective2> </inner-disrective2> </outer-directive> <script> var app = angular.module ('myapp', []); app.directive ('outerDirective', function () {return {scope: {}, batasi: 'ae', controller: function ($ scope) {this.say = function (somedirective) {console.log ('got:' + someDirective.message);};}}}}; app.directive ('innerdirective', function () {return {scope: {}, restrict: 'ae', membutuhkan: '^outerDirective', tautan: fungsi (lingkup, elem, attrs, controllerInstance) {scope.message = "hi, leifeng"; controllerinstance. app.directive ('innerdirective2', function () {return {scope: {}, restrict: 'ae', membutuhkan: '^outerDirective', tautan: fungsi (lingkup, elem, attrs, controllerInstance) {scope.message = "hi, shushu"; controllerinstance.say.say (scope.message (hi, hi, shushu "; controllerinstance. </script> </body> </html>Instruksi Innerdirective dan Arnerdirective Insective2 dalam contoh metode penggunaan kembali di atas yang didefinisikan dalam pengontrol arahan luar arah.
Lebih lanjut dijelaskan bahwa pengontrol dalam instruksi digunakan untuk berkomunikasi antara berbagai instruksi.
Selain itu, kami dapat menambahkan awalan ke nilai parameter kebutuhan, yang akan mengubah perilaku pengontrol pencarian:
(1) Tanpa awalan, instruksi akan dicari dalam pengontrol yang disediakan dengan sendirinya. Jika tidak ada pengontrol yang ditemukan, kesalahan akan dilemparkan.
(2)? Jika pengontrol yang diperlukan tidak ditemukan dalam instruksi saat ini, null akan diteruskan ke parameter keempat dari fungsi koneksi tautan
(3)^Jika pengontrol yang diperlukan tidak ditemukan dalam instruksi saat ini, pengontrol elemen induk akan ditemukan
(4)?^ Kombinasi
12. Proses Kompilasi Instruksi Anguar
Pertama memuat pustaka AngularJS dan menemukan arahan NG-APP untuk menemukan batas-batas aplikasi.
Hubungi $ Layanan Kompilasi untuk Kompilasi sesuai dengan ruang lingkup yang ditentukan oleh NG-APP. AngularJS akan melintasi seluruh dokumen HTML dan memproses instruksi yang dinyatakan pada halaman sesuai dengan prioritas instruksi sesuai dengan instruksi. DOM dikonversi sesuai dengan parameter konfigurasi (templat, tempat, transclude, dll.) Dalam instruksi dan kemudian mulai mengeksekusi fungsi kompilasi dari setiap instruksi secara berurutan (jika fungsi kompilasi didefinisikan pada instruksi) untuk mengonversi templat itu sendiri.
Catatan: Fungsi kompilasi di sini dikonfigurasi dalam Petunjuk kami, yang berbeda dari layanan $ kompilasi yang disebutkan di atas. Setelah setiap fungsi kompilasi dieksekusi, fungsi tautan akan dikembalikan, dan semua fungsi tautan akan digabungkan ke dalam fungsi tautan yang besar.
Kemudian fungsi tautan besar ini akan dieksekusi, terutama untuk pengikatan data, secara dinamis memodifikasi data dalam ruang lingkup dengan mendaftarkan pendengar pada DOM, atau menggunakan $ Watchs untuk mendengarkan variabel dalam ruang lingkup untuk memodifikasi DOM, sehingga membuat pengikatan dua arah, dll. Jika fungsi kompilasi tidak dikonfigurasi dalam instruksi kami, fungsi tautan yang kami dikonfigurasi. Apa yang dia lakukan kira -kira sama dengan fungsi tautan besar yang disintesis oleh semua fungsi tautan setelah kompilasi kembali di atas.
Oleh karena itu: dalam arahan, opsi kompilasi dan tautan saling eksklusif. Jika kedua opsi ini diatur pada saat yang sama, fungsi yang dikembalikan oleh Compile akan dianggap sebagai fungsi tautan, dan opsi tautan itu sendiri akan diabaikan.
13. Fungsi Kompilasi
function compile (telement, tattrs, transclude) {...}
Fungsi kompilasi digunakan untuk menangani situasi di mana DOM templat perlu dimodifikasi. Karena sebagian besar instruksi tidak memerlukan modifikasi template, fungsi ini tidak umum digunakan. Contoh yang perlu digunakan termasuk NGTrepeat, yang mengharuskan templat untuk dimodifikasi, dan NGVIEW mengharuskan konten dimuat secara asinkron. Fungsi yang dikompilasi menerima parameter berikut.
Telement - Elemen Template - Elemen di mana arahan berada. Aman untuk merusak elemen ini dan sub-elemennya.
Tattrs - Atribut Template - Semua atribut yang dinyatakan oleh arahan pada elemen ini dibagi dalam fungsi yang dikompilasi.
Transclude - Fungsi fungsi tautan tertanam (lingkup, clonelinkingfn).
Catatan: Jangan melakukan operasi apa pun selain deformasi DOM dalam fungsi yang dikompilasi. Lebih penting lagi, pendaftaran peristiwa mendengarkan DOM harus dilakukan dalam fungsi tertaut, bukan dalam fungsi yang dikompilasi.
Fungsi yang dikompilasi dapat mengembalikan objek atau fungsi.
Fungsi Pengembalian - setara dengan fungsi tautan yang terdaftar menggunakan atribut tautan dari objek konfigurasi ketika fungsi yang dikompilasi tidak ada.
Return Object - Mengembalikan objek yang telah mendaftarkan fungsi melalui atribut Pre atau Post. Lihat penjelasan fungsi pra-hubungan dan pasca-keseimbangan di bawah ini.
14. Fungsi menghubungkan
tautan fungsi (lingkup, ielement, iattrs, controller) {...}
Fungsi tautan bertanggung jawab untuk mendaftarkan acara DOM dan memperbarui DOM. Ini dieksekusi setelah template dikloning, dan juga di mana sebagian besar kode logika instruksi ditulis.
Lingkup - Lingkup yang perlu didengarkan arahan.
IElement - Elemen instan - elemen di mana arahan berada. Aman untuk beroperasi pada elemen anak dari elemen dalam fungsi postlink, karena mereka semua terkait.
IATTR - Atribut Instance - Atribut instan, daftar atribut standar yang dinyatakan pada elemen saat ini, yang dibagikan di antara semua fungsi yang ditautkan.
Controller - Controller Instance, yaitu, pengontrol di dalam Direct2 diminta oleh instruksi saat ini. Sebagai contoh: controller: function () {this.addstrength = function () {}} Dalam directive direct2, kemudian, dalam fungsi tautan arahan saat ini, Anda dapat memanggilnya melalui controller.addStrength.
Fungsi pra-tautan dieksekusi sebelum elemen anak terhubung. Itu tidak dapat digunakan untuk mendeformasi DOM jika fungsi tautan tidak dapat menemukan elemen yang benar untuk ditautkan.
Fungsi pasca-hubungan semua elemen dieksekusi setelah ditautkan.
menjelaskan:
Opsi kompilasi itu sendiri tidak sering digunakan, tetapi fungsi tautan sering digunakan. Pada dasarnya, ketika kami mengatur opsi tautan, kami benar -benar membuat fungsi tautan postlink () sehingga fungsi compile () dapat menentukan fungsi tautan. Secara umum, jika fungsi kompilasi ditetapkan, itu berarti bahwa kami ingin melakukan operasi DOM sebelum instruksi dan data real-time dimasukkan ke dalam DOM. Aman untuk melakukan operasi DOM seperti menambahkan dan menghapus node dalam fungsi ini. Opsi kompilasi dan tautan saling eksklusif. Jika kedua opsi ini diatur pada saat yang sama, fungsi yang dikembalikan oleh Compile akan dianggap sebagai fungsi tautan, dan opsi tautan itu sendiri akan diabaikan. Fungsi terjemahan bertanggung jawab untuk mengonversi DOM template. Fungsi tautan bertanggung jawab untuk menghubungkan ruang lingkup dan DOM. DOM dapat dioperasikan secara manual sebelum ruang lingkup terkait dengan DOM. Dalam praktiknya, operasi semacam ini sangat jarang ketika menulis instruksi khusus, tetapi ada beberapa instruksi bawaan yang menyediakan fungsionalitas seperti itu. Fungsi tautan adalah opsional. Jika fungsi yang dikompilasi didefinisikan, ia mengembalikan fungsi yang ditautkan, jadi ketika kedua fungsi didefinisikan, fungsi yang dikompilasi membebani fungsi yang ditautkan. Jika instruksi kami sederhana dan tidak memerlukan pengaturan tambahan, kami dapat mengembalikan fungsi dari fungsi pabrik (fungsi callback) untuk mengganti objek. Jika ini dilakukan, fungsi ini adalah fungsi tautan.
Artikel ini direproduksi http://blog.csdn.net/evankaka
Di atas adalah seluruh konten penggunaan AngularJS: Instruksi Arahan, saya harap ini akan membantu untuk pembelajaran semua orang.