Angular 下的 directive （part 1）

時間 2020-08-18

標籤 angular directive 欄目 AngularJS 简体版

原文原文鏈接

directive 指令

Directive components 指令部分

使用指令自動引導一個AngularJS應用。ngApp指令指定應用程序的根元素,一般是放在頁面的根元素如：

<body> or <html>標籤。

AngularJS應用程序能夠自動引導HTML文檔、首先在文檔中找到ngApp將被引導爲應用程序的根元素。

在HTML文檔中運行多個應用程序您必須手動引導他們使用 angular.bootstrap來代替。

AngularJS應用程序不能相互嵌套。

您能夠指定一個AngularJS模塊做爲根模塊用於應用程序。應用程序被引導時這個模塊將加載到注入器以及

應用程序須要的代碼或者依賴於其餘模塊包含的代碼 angular.module中有跟多的信息

下面的這個例子中，若是ngApp指令沒有放在html文檔不會被編譯,AppController將不可以被實例化爲

{{ a+b }} 等於 3

因此要這麼寫

HTML：

I can add: {{a}} + {{b}} = {{ a+b }} // i can add: 1 + 2 = 3;

</div>

angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {

$scope.a = 1;

$scope.b = 2;

});

</script>

</body>

Javascript:

angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
});

Directive Info (指令信息)

這個指令執行優先級爲0。

Usage

做爲屬性：

<ANY
  ng-app="">
    ...
</ANY>

Arguments

Param	Type	Details
ngApp	angular.Module	可配置應用程序模塊被載入javascript

a

修改A標籤的默認行爲,阻止默認動做當Href屬性爲空的時候。css

這種變化使得很容易用ngClick指令建立建立操做連接，而不改變位置或致使頁面從新加載

例如：

<a href="" ng-click="list.addItem()">Add Item</a>

Usage

as element:

<a>
...
</a>

///////////////////////////////////////////////////////

<body ng-app="ngAppDemo">

<div ng-controller="ngAppDemoController">

<a href="" ng-click="list.addItem()">Add Item</a>

</div>

<script type="text/javascript">

angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {

$scope.list = {

addItem: function() {

alert("test");

});

</script>

</body>

ngHref

Angular是用{{}}來標記的，在用戶點擊的時候angrual還咩有去替換href屬性中{{}}值。這樣html

angular替換連接就被失敗了，一般顯示爲 404 錯誤java

ngHref指令將解決這個問題 （指令由angrular自帶的，也有本身定義的 往後會知道指令的重要性）

錯誤的寫法是：angularjs

<a href="http://www.gravatar.com/avatar/{{hash}}"/>

正確的方法去寫它：web

<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>

Directive Info

這個指令執行優先級99。

Usage

<A
  ng-href="">
...
</A>

Arguments

Param	Type	Details
ngHref	template	任何字符串能夠包含{{}}裏。

ngSrc

使用Angular標籤如{{}}對src屬性操做不正確,瀏覽器將獲取的URL字面量{{hash}}直到Angular替換它裏面的表達式{{hash}}，ngSrc指令解決這個問題

不建議的寫法：正則表達式

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

寫它的正確方法：

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Directive Info

這個指令執行優先級99。

Usage

<IMG

ng-src="">
...
</IMG>

Arguments

Param	Type	Details
ngSrc	template	任何字符串能夠包含在 `{{}}`標籤裏 .chrome

ngSrcset

這個目前就支持webkit內核的。參考網址來了解它一下

http://developer.51cto.com/art/201309/410720.htm

使用Angular標籤如{{}}對ngSrcset屬性操做不正確,瀏覽器將獲取的URL字面量{{hash}}直到Angular替換它裏面的表達式{{hash}}，ngSrcset指令解決這個問題

不建議的寫法：express

<img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>

建議的方案：bootstrap

  <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>

Directive Info

這個指令執行優先級99。

Usage

  <IMG
  ng-srcset="">
...
</IMG>

Arguments

Param	Type	Details
ngSrcset	template	任何字符串能夠包含在 `{{}}`標籤裏 .

ngDisabled （不可用，不可顯示）

咱們不該該這樣作，應爲他僅對chrome FF瀏覽器可用，對ie8 已經以前的版本不可用。

<button disabled="{{scope.isDisabled}}">Disabled</button>

</div>

HTML規範不要求瀏覽器禁用等保護布爾屬性的值。（true證實可用，false爲不可用）

若是咱們在angular裏面放一個這樣的屬性，當瀏覽器移除此屬性，綁定信息將丟失。

ngDisabled指令解決了這個爲題關於disabled的屬性，這種互補的指令不會被瀏覽器撤銷，所以

提供了一個永久可靠存儲綁定信息的地方。

Directive Info

這個指令執行優先級100。

Usage

 <INPUT
  ng-disabled="">
...
</INPUT>

///////////////////////////////////////////////////////

Click me to toggle: <input type="text" ng-model="youname"><br/>

{{youname}}

<button ng-disabled="youname">Button</button>

 ng-disabled="youname"寫成字符串的時候就能夠實現，若是用{{}}就不可用。

Arguments

Param	Type	Details
ngDisabled	expression	若是表達式爲真，那麼這個特別的屬性「disabled」將被禁用

ngChecked

HTML規範不要求瀏覽器禁用等保護布爾屬性的值。（true證實可用，false爲不可用）

若是咱們在angular裏面放一個這樣的屬性，當瀏覽器移除此屬性，綁定信息將丟失。

ngChecked指令解決了這個爲題關於checked的屬性，這種互補的指令不會被瀏覽器撤銷，所以

提供了一個永久可靠存儲綁定信息的地方。

Directive Info

這個指令執行優先級100。

Usage

 <INPUT
  ng-checked="">
...
</INPUT>

//////////////////////////////////////

Check me to check both: <input type="checkbox" ng-model="master"><br/>
<input id="checkSlave" type="checkbox" ng-checked="master">

Arguments

Param	Type	Details
ngChecked	xpression	若是表達式爲真，那麼這個特別的屬性「checked」將被設置

ngReadonly (只讀)

HTML規範不要求瀏覽器禁用等保護布爾屬性的值。（true證實可用，false爲不可用）

若是咱們在angular裏面放一個這樣的屬性，當瀏覽器移除此屬性，綁定信息將丟失。

ngReadonly指令解決了這個爲題關於r eadonly的屬性，這種互補的指令不會被瀏覽器撤銷，所以

提供了一個永久可靠存儲綁定信息的地方。

Directive Info

這個指令執行優先級100。

Usage

<INPUT
  ng-readonly="">
...
</INPUT>

   //////////////////////////////////////////////////

Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
<input type="text" ng-readonly="checked" value="I'm Angular"/>

Arguments

Param	Type	Details
ngReadonly	expression	若是表達式爲真，那麼這個特別的屬性「checked」將被設置

ngSelected

HTML規範不要求瀏覽器禁用等保護布爾屬性的值。（true證實可用，false爲不可用）

若是咱們在angular裏面放一個這樣的屬性，當瀏覽器移除此屬性，綁定信息將丟失。

ngSelected指令解決了這個爲題關於selected的屬性，這種互補的指令不會被瀏覽器撤銷，所以

提供了一個永久可靠存儲綁定信息的地方。

Directive Info

這個指令執行優先級100。

Usage

Arguments

Param	Type	Details
ngSelected	expression	若是表達式爲真，那麼這個特別的屬性「selected」將被設置

ngOpen

只是一個創意性的東西，在全部的瀏覽器中都不兼容

ngForm

form 嵌套指令，HTML表單元素不容許嵌套。它一般對嵌套表單頗有效果。例如：若是一個子集合的有效性的控制須要肯定。

註釋：咱們的目的是讓 ng-form 能進行成組的控制。可是不能代替原有的 <form> 標籤，於它的全部功能。（如發佈到服務器,……）

Directive Info

這個指令執行優先級爲0。

Usage

as element://做爲元素 (這個指令能夠用做自定義元素,可是注意在IE中的限制).

<ng-form
  [name=""]>
...
</ng-form>

as attribute: //做爲屬性

<ANY
  [ng-form=""]>
...
</ANY>

as CSS class://做爲累，樣式

<ANY class="[ng-form: ;]"> ... </ANY>

Arguments

Param	Type	Details
ngForm \| name (optional)	string	表單的名稱,若是指定,控制器將發表形式到相關名字範圍,

textarea

HTML文本區元素控制angular數據綁定,這個元素的數據綁定和驗證和輸入元素徹底相同。

Directive Info

這個指令執行優先級爲0。

Usage

as element:

<textarea
  ng-model=""
  [name=""]
  [required=""]
  [ng-required=""]
  [ng-minlength=""]
  [ng-maxlength=""]
  [ng-pattern=""]
  [ng-change=""]
  [ng-trim=""]>
...
</textarea>

Arguments

Param	Type	Details
ngModel	string	可指定的angular數據綁定表達式
name (optional)	string	屬性名的形式控制發表。
required (optional)	string	若是你的值沒有鍵入，那麼設置 required 驗證錯誤的關鍵
ngRequired (optional)	string	添加所需的屬性,要求驗證約束元素ngRequired表達式的求值結果爲true。使用ngRequired而不是必需的當你想要數據綁定到所需的屬性。
ngMinlength (optional)	number	若是鍵入值比最短輸入值還少的話，設置的 minlength 就會生效提示錯誤
ngMaxlength (optional)	number	若是鍵入值比最短輸入值還多的話，設置的 maxlength 就會生效提示錯誤
ngPattern (optional)	string	若是不匹配正則，pattern 錯誤就會生效，預期值/正則表達式/內聯模式或者regexp模式定義爲範圍表達式。
ngChange (optional)	string	Angular表達式被執行當輸入發生變化時因爲輸入用戶交互元素。
ngTrim (optional)	boolean	若是設置爲false Angular不會減小Input的輸入【減小兩遍的空格】 (default: true)--->默認爲true

input

HTML控制着表單輸入元素，當在跟ng-model一塊兒使用的時。它提供了數據綁定,輸入狀態控制和驗證。輸入控件是HTML5輸入類型

input控制着一下的一些ＨＴＭＬ５表單類型以及對一個老版本的ＨＴＭＬ５的驗證行爲。

註釋：不是每一個功能提供對全部輸入類型可用。指定，數據綁定和事件處理ng-model不支持input[file]

詳細描寫： https://docs.angularjs.org/api/ng/directive/input

ngForm

form 嵌套指令，HTML表單元素不容許嵌套。它一般對嵌套表單頗有效果。例如：若是一個子集合的有效性的控制須要肯定。

註釋：咱們的目的是讓 ng-form 能進行成組的控制。可是不能代替原有的 <form> 標籤，於它的全部功能。（如發佈到服務器,……）

Directive Info

這個指令執行優先級爲0。

Usage

as element://做爲元素 (這個指令能夠用做自定義元素,可是注意在IE中的限制).

<ng-form
  [name=""]>
...
</ng-form>

as attribute: //做爲屬性

<ANY
  [ng-form=""]>
...
</ANY>

as CSS class://做爲累，樣式

<ANY class="[ng-form: ;]"> ... </ANY>

Arguments

Param	Type	Details
ngForm \| name (optional)	string	表單的名稱,若是指定,控制器將發表形式到相關名字範圍,

textarea

HTML文本區元素控制angular數據綁定,這個元素的數據綁定和驗證和輸入元素徹底相同。

Directive Info

這個指令執行優先級爲0。

Usage

as element:

<textarea
  ng-model=""
  [name=""]
  [required=""]
  [ng-required=""]
  [ng-minlength=""]
  [ng-maxlength=""]
  [ng-pattern=""]
  [ng-change=""]
  [ng-trim=""]>
...
</textarea>

Arguments

Param	Type	Details
ngModel	string	可指定的angular數據綁定表達式
name (optional)	string	屬性名的形式控制發表。
required (optional)	string	若是你的值沒有鍵入，那麼設置 required 驗證錯誤的關鍵
ngRequired (optional)	string	添加所需的屬性,要求驗證約束元素ngRequired表達式的求值結果爲true。使用ngRequired而不是必需的當你想要數據綁定到所需的屬性。
ngMinlength (optional)	number	若是鍵入值比最短輸入值還少的話，設置的 minlength 就會生效提示錯誤
ngMaxlength (optional)	number	若是鍵入值比最短輸入值還多的話，設置的 maxlength 就會生效提示錯誤
ngPattern (optional)	string	若是不匹配正則，pattern 錯誤就會生效，預期值/正則表達式/內聯模式或者regexp模式定義爲範圍表達式。
ngChange (optional)	string	Angular表達式被執行當輸入發生變化時因爲輸入用戶交互元素。
ngTrim (optional)	boolean	若是設置爲false Angular不會減小Input的輸入【減小兩遍的空格】 (default: true)--->默認爲true

input

HTML控制着表單輸入元素，當在跟ng-model一塊兒使用的時。它提供了數據綁定,輸入狀態控制和驗證。輸入控件是HTML5輸入類型

input控制着一下的一些ＨＴＭＬ５表單類型以及對一個老版本的ＨＴＭＬ５的驗證行爲。

註釋：不是每一個功能提供對全部輸入類型可用。指定，數據綁定和事件處理ng-model不支持input[file]

詳細描寫： https://docs.angularjs.org/api/ng/directive/input

ngModel

這個東西真心的好多，並且大致上都是一個樣子的。總之用的會很廣，就懶下不翻譯了，本身看看。而後進行下一個

具體的位置在這裏： https://docs.angularjs.org/api/ng/directive/ngModel 而後裏面的方法一個個的打開看看

這裏就簡單的介紹下

ngModel指令綁定一個輸入、選擇、文本區(或自定義表單控件)使用NgModelController範圍上的一個屬性,建立和使用本指令。

1.ngModel負責以下：綁定到模型的視圖，用於指令輸入,文本區或選擇要求。

2.須要提供驗證行爲(即,號碼,電子郵件,url)。

3.保持的狀態控制(有效/無效,髒/原始,觸摸/非觸摸,驗證錯誤)。

4.設置相關的css類的元素( ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched)包括動畫。

5.父窗口注入控制

<script>
 angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.val = '1';
   }]);
</script>
<style>
  .my-input {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    background: transparent;
  }
  .my-input.ng-invalid {
    color:white;
    background: red;
  }
</style>
Update input to see transitions when valid/invalid.
Integer is a valid value.
<form name="testForm" ng-controller="ExampleController">
  <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
</form>

ngChange

//當表單有所改變的時候去執行，就是跟點擊事件差很少了，基本上都是調用一個函數去執行。

<script>
  angular.module('changeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.counter = 0;
      $scope.change = function() {
        $scope.counter++;
      };
    }]);
</script>
<div ng-controller="ExampleController">
  <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
  <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
  <label for="ng-change-example2">Confirmed</label><br />
  <tt>debug = {{confirmed}}</tt><br/>
  <tt>counter = {{counter}}</tt><br/>
</div>

ngList

//它的用法居然是將輸入的字符串去切割成數組。

通過測試有了 ng-list 方法後，那麼輸入值若是不是數組的，默認在 ng-model裏面是不會顯示出來的。

文本輸入,轉換之間的分隔的字符串和字符串數組。默認的分隔符是一個逗號,後跟一個空間至關於ng-list=", "

您能夠指定一個自定義分隔符的值——例如ngList屬性 ng-list=" | ".

該指令方法受到 ngTrim 屬性的影響

1：若是ngTrim設置成了false，而後空格分隔符和每一個列表項均可以使用。這意味着用戶的指令負責處理空白,還容許您使用空格做爲分隔符,例如標籤或換行符。

2：不然空格分隔符分割時能夠忽略周圍的(儘管它是推薦

當加入列表項)和空白在每一個列表項剝奪以前添加到模型中。

ngValue

綁定了以下表達式的值 input[select] or input[radio]，因此當元素被選中selected的時候ngModel元素設置爲綁定值也就是value的值。

Directive Info

這個指令執行優先級爲0。

<script>
   angular.module('valueExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.names = ['pizza', 'unicorns', 'robots'];
       $scope.my = { favorite: 'unicorns' };
     }]);
</script>
 <form ng-controller="ExampleController">
   <h2>Which is your favorite?</h2>
     <label ng-repeat="name in names" for="{{name}}">
       {{name}}
       <input type="radio"
              ng-model="my.favorite"
              ng-value="name"
              id="{{name}}"
              name="favorite">
     </label>
   <div>You chose {{my.favorite}}</div>
 </form>

ngModelOptions

使用ngModelOptions您能夠指定自定義的事件列表，這將觸發一個模型更新和/或消除抖動延遲，因此實際只更新一個計時器到期時發生;

這個計時器將重置後另外一個變化。

Arguments

Param	Type	Details
ngModelOptions	object	選擇適用於當前的模型。有效值是: `updateOn`:字符串指定應該輸入綁定到哪一個事件。你可使用一個空間分隔的列表設置幾個事件。有一個特殊事件 default 來匹配默認的事件。 debounce：整數值包含防反跳模型更新值以毫秒爲單位。值0觸發當即更新。若是對象支持，您能夠指定一個自定義值爲每個事件; 例如： ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" allowInvalid：布爾值,代表該模型能夠設置值不能正確的配置行爲設置模型來定義。 getterSetter：布爾值決定是否將函數綁定到ngModel getter / setter。 timezone:定義要使用的時區讀/寫 data 實例在模型<input type="date">, <input type="time">, ... 如今僅支持值是UTC,不然將使用瀏覽器的默認時區。

ngBind

ngBind屬性告訴angular來取代指定的HTML元素的文本內容.表達式的值的變化時，便更新文本內容。

一般,你不直接使用ngBind,而是使用{{表達式}}，能夠減小冗長。

若是Angular編譯，模板暫時由瀏覽器顯示其原始狀態以前。最好使用ngBind代替{ {表達式} }，由於ngBind是一個元素的屬性,

它可使用戶看不見的綁定在頁面加載，也就是說看不到{{}}表達式的東西。

另外一個解決這個問題將是使用ngCloak指令。

Directive Info

這個指令執行優先級爲0。

Usage

as attribute:
```
<ANY
  ng-bind="">
...
</ANY>
```

as CSS class:

<ANY class="ng-bind: ;"> ... </ANY>

Arguments

Param	Type	Details
ngBind	expression	表達式來評估

Example

實時預覽文本框中輸入一個名稱;文本框下面的問候當即變化。

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
</div>

ngBindTemplate

ngBindTemplate指令指定的元素文本內容應該替換爲模板的插值,在在ngBindTemplate屬性。不像ngBind，

ngBindTemplate能夠包含多個{ { } }表達式。這個指令須要限制一些HTML元素(如title和option)不能包含SPAN元素。

Usage

```
<ANY
  ng-bind-template="">
...
</ANY>
```

Arguments

Param	Type	Details
ngBindTemplate	string	模板從 `{{` `expression` `}}` eval.

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.salutation = 'Hello';
      $scope.name = 'World';
    }]);
</script>
<div ng-controller="ExampleController">
 Salutation: <input type="text" ng-model="salutation"><br>
 Name: <input type="text" ng-model="name"><br>
 <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>

ngBindHtml

建立一個綁定,將innerHTML表達式的結果放到當前元素在一個安全的方式。默認狀況下,innerHTML-ed內容將使用 $sanitize 服務。利用這個功能,確保 $sanitize 是可用的。例如,經過包括ngSanitize模塊的依賴關係(而不是angular核心)。爲了使用ngSanitize模塊的依賴關係,你須要包括「angular-sanitize。js」在您的應用程序。

你也能夠用你知道的安全值去繞過sanitization，要作到這一點,經過 $sce.trustAsHtml綁定到一個明確的信任值。

看下面的這個例子r Strict Contextual Escaping (SCE).

註釋：若是 $sanitize 服務無效和綁定值不是肯定值,將會有異常（而不是一個可用的）。

Directive Info

這個指令執行優先級爲0。

Usage

as attribute:

<ANY
  ng-bind-html="">
...
</ANY>

Arguments

Param	Type	Details
ngBindHtml	Expression	解析表達式.

ngClass

ngClass指令容許您動態HTML元素上設置CSS類，數據綁定表達式表明所需添加的類。、

該指令有三種不一樣的方式,這取決於表達式的三種類型：

1.若是表達式的求值結果爲一個字符串，字符串應該是一個或多個空格分隔類名。

2.若是表達式的求值結果爲一個數組,應該是一個字符串數組的每一個元素是一個或多個空格分隔類名。

3.若是表達式的求值結果爲對象,而後爲每一個對象的鍵-值對可疑值對應的關鍵是做爲類名。

該指令不會添加劇復的類若是已經設置一個特定的類。

當表達變化時,前面添加類都刪除,而後再添加新類。

Directive Info

這個指令執行優先級爲0。

Usage

as attribute:

<ANY
  ng-class="">
...
</ANY>

as CSS class:

<ANY class="ng-class: ;"> ... </ANY>

ngClassOdd

ngClassOdd and ngClassEven 徹底按照ngclass來工做，除了他們在一塊兒工做，

除了他們在結合ngRepeat工做和只在奇數(偶數)行生效。

這個指令能夠應用只有ngRepeat的範圍內。

Usage

as attribute:

<ANY

ng-class-odd="">

...

</ANY>

as CSS class:

<ANY class="ng-class-odd: ;"> ... </ANY>

Arguments

Param	Type	Details
ngClassOdd	expression	表達式eval,結果能夠是一個字符串,用空格分割類或一個數組。

ngClassEven 跟 ngClassOdd 正好相反

1. [Angular] Directive. 1
2. Angular--Directive
3. angular directive
4. [Angular Directive] Structure directive and
5. Part 6 AngularJS ng repeat directive
6. Angular 2 Directive
7. Angular 2 Directive Lifecycle
8. angular指令 directive
9. angular directive scope
10. angular之directive(二)
更多相關文章...
• Swift 下標腳本 - Swift 教程
• ionic 下拉刷新 - ionic 教程
• Docker容器實戰(七) - 容器眼光下的文件系統
• IDEA下SpringBoot工程配置文件沒有提示

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。