Angular.js中的指令——易懂全解析 · 前端開發常用技巧經驗記錄

~~~ <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">angular.js中，指令是最基礎的也是最重要的工具之一。angular.js指令指的是以ng為前綴的HTML屬性。在之前的ng-app、ng-model等，都屬于指令。</span> ~~~ angular.js中的基本指令包括如下內容： 1.ng-app/ng-model ng-app指令用于聲明angular,js的作用范圍，ng-model用于聲明模型。這些在之前都已經進行過詳細介紹。 2.ng-init 這個指令用于進行模塊的初始化，一個最簡單的使用方法是利用這個指令進行數據初始化，代碼如下： ~~~ <div ng-app="" ng-init="cost=5"> <p>單價： {{ cost }}</p> </div> ~~~ 上述代碼中，利用ng-init初始化了cost變量的值，在之后利用{{}}（angular中的數據綁定方式之一）進行調用。但是這種數據初始化的方式并不推薦。 3.ng-bind 這個指令可以用來進行數據綁定，它的功能就和我們之前提到的{{}}作用相同。在如下代碼中，我們不用{{}}方式，而改用ng-bind指令進行數據綁定，代碼如下： ~~~ <div ng-app="" ng-init="cost=5"> <p>單價： <span ng-bind= "cost"></span></p> </div> ~~~ 4.ng-repear ng-repeat指令用于進行反復輸出，一般用于對數組的遍歷，示例代碼如下： ~~~ <div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循環對象：</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> ~~~ 這里對names內的所有徐對象進行遍歷，并分別按照規定的模板進行輸出，類似于php中的foreach語句。x in names表示將names數組中的每一個對象都賦值給x，然后輸出，沒循環一次進行一次這個操作，直到將數組遍歷結束。以上給出的都是AngularJS中自己預先定義的指令。我們在angular.js中還可以自己進行指令的定義，需要使用directive方法。一個簡單的指令定義代碼如下： ~~~ var app = angular.module("myApp", []); app.directive("hello", function() { return { template : "<h1>自定義指令!</h1>"//tempate指定該指令渲染的模板 }; }); ~~~ 上面的代碼中我們定義了一個hello指令，template定義了該指令的模板，即我們使用這個指令時，需要在html中呈現出什么樣的內容。定義好指令后，就可以像之前一樣進行調用了。上面對指令的調用只給出了作為html屬性的調用方式。其實angular.js中提供了四種進行指令調用的方法。它們分別為元素名調用、屬性調用、類名調用和注釋調用。它們的形式如下（按順序）： ~~~ <runoob-directive>runoob-directive>?? ~~~ ~~~ <div?runoob-directive>div>?? ~~~ ~~~ <div?class="runoob-directive">div>?? ~~~ angular中，為了更清楚的表示這四種調用，每個調用都為其設定了一個英文字母的標識，用于在指令定義時限定它們的被調用方式，分別為： E 只限元素名使用 A 只限屬性使用 C 只限類名使用 M 只限注釋使用下面的例子說明了如何在定義指令時使用這些限制： ~~~ var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "A", template : "<h1>自定義指令!</h1>" }; }); ~~~ 當然，這些標識也可以放在一起使用，默認的restrict為EA，表示可以元素名調用或者屬性調用。