蒼天家本家

ng - Angluar API一覽(directive) 2017-01-11
ngApp :定義可使用AngularJS(aJS)的範圍記號
<html ng-app>

a :將預設超連結事件取消,改用aJS來處理事件.
<a href="" ng-click="list.addItem()">Add Item</a>

ngHref :變成可變動式超連結
<a id="link-6" ng-href="{{value}}">link</a>

ngSrc :變成可變動式src連結
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

ngSrcset:變成可變動式srcset連結(<source>)
<img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>

ngDisabled:改變按鈕的disabled元素
<button disabled="{{scope.isDisabled}}">Disabled</button>

ngChecked :偵測單選tag是否為打勾狀態
<input id="checkSlave" type="checkbox" ng-checked="master">

ngReadonly:改變文字輸入欄位是否可以編輯
<input type="text" ng-readonly="checked" value="I'm Angular"/>

ngSelected:勾選後強制指定特定選項
<option id="greet" ng-selected="selected">Greetings!</option>

ngOpen :勾選後展開details標籤
<details id="details" ng-open="open"><summary>show</summary></details>

ngForm :解決一般form無法使用朝狀表單問題
<ng-form [name=""]>...</ng-form>
<ANY [ng-form=""]>...</ANY>
<ANY class="[ng-form: ;]"> ... </ANY>

form :可嵌入ng-controller物件
<form name="myForm" ng-controller="Ctrl" class="my-form">

textarea :textarea標籤aJS用屬性
[name=""][required=""][ng-required=""][ng-minlength=""][ng-maxlength=""][ng-pattern=""][ng-change=""]
<textarea ng-model="" [name=""] [required=""] ... >...</textarea>

input :input標籤aJS用屬性
[name=""][required=""][ng-required=""][ng-required=""][ng-minlength=""][ng-maxlength=""][ng-pattern=""][ng-change=""]
<input ng-model="" [name=""][required=""]>...</input>

ngModel :綁定於input/select/textarea,讓NgModelController操控的物件
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />

ngChange :當內容值變更時,啟動此事件
<input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-ex" />

ngList :透過","分隔記號將input自動轉變為陣列
<input name="namesInput" ng-model="names" ng-list required>

ngValue :綁定或讀取目前的selectBox跟radio物件的值
<input type="radio" ng-model="my.favorite" ng-value="name" id="{{name}}" name="favorite">

ngModelOptions :可定義特殊事件來轉變input內的值或是延遲更新資料
<input type="text" name="userName" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }"/>
<input type="text" name="userName" ng-model="user.name" ng-model-options="{ debounce: 1000 }" />

ngBind :與ngModel進行同步更新綁定資料
<span ng-bind="name">

ngBindTemplate :與ngBind一樣,但是可以多重變數
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>

ngBindHtml :綁定成html型態的資料
<p ng-bind-html="myHTML"></p>

ngClass :允許元素變更或加入多種class,或是以動態方式變動元素樣式(anime)
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<p ng-class="style">Using String Syntax</p>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>

ng-class-odd :使用ngRepeat連續輸入時,單數筆資料欄位的樣式
ngClassEven :使用ngRepeat連續輸入時,雙數筆資料欄位的樣式
<span ng-class-odd="'odd'" ng-class-even="'even'">

ngCloak :跟ngBind用法類似,但改用{{ }},並且需自訂class
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>

ngController :作為aJS的控制區塊,每一塊皆可獨立使用
<div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">

ngCsp :開啟對於內容安全政策(CSP)的支援(讓Chrome外掛元件允許使用)
<html ng-app ng-csp>

ngClick :執行滑鼠單擊事件的功能
<button ng-click="count = count + 1" ng-init="count=0">

ngDblclick :執行滑鼠雙擊事件的功能
<button ng-dblclick="count = count + 1" ng-init="count=0">

ngMousedown :執行滑鼠按住事件的功能
<button ng-mousedown="count = count + 1" ng-init="count=0">

ngMouseup :執行滑鼠放開事件的功能
<button ng-mouseup="count = count + 1" ng-init="count=0">

ngMouseover :執行滑鼠滑出事件的功能(滑入一瞬間)
<button ng-mouseover="count = count + 1" ng-init="count=0">

ngMouseover :執行滑鼠滑出事件的功能(滑入一瞬間)
<button ng-mouseover="count = count + 1" ng-init="count=0">

ngMouseleave :執行滑鼠滑出事件的功能(滑出一瞬間)
<button ng-mouseleave="count = count + 1" ng-init="count=0">

ngMousemove :執行滑鼠滑動事件的功能(只要有移動時)
<button ng-mousemove="count = count + 1" ng-init="count=0">

ngKeydown :執行鍵盤按住事件的功能(包含注音輸入ㄅㄆㄇ下)
<input ng-keydown="count = count + 1" ng-init="count=0">

ngKeyup :執行鍵盤放開事件的功能(包含注音輸入ㄅㄆㄇ下)
<input ng-keyup="count = count + 1" ng-init="count=0">

ngKeypress :執行鍵盤放開事件的功能(不包含注音輸入ㄅㄆㄇ時)
<input ng-keypress="count = count + 1" ng-init="count=0">

ngSubmit :接受到type='submit'時執行指令
<form ng-submit="submit()" ng-controller="Ctrl">

ngFocus :當滑鼠聚焦於該元素(如input)時執行動作
<input type="text" ng-class="{ myFocus: focus}" ng-focus="focus=true;">

ngBlur :當滑鼠失焦於該元素(如input)時執行動作
<input type="text" ng-class="{ yBlur: blur }" ng-blur="blur=true;">

ngCopy :當滑鼠使用Ctrl+C或是選單複製時執行動作
<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">

ngCut :當滑鼠使用Ctrl+X或是選單剪下時執行動作
<input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">

ngPaste :當滑鼠執行Ctrl+V或是選單貼上時執行動作
<input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>

ngIf :對於物件進行if的判定,當符合條件執行動作
<span ng-if="checked" class="animate-if">

ngInclude :類似於jQ的load功能,將外部的網頁給載入
<div class="slide-animate" ng-include="template.url"></div>

ngInit :設定物件的初始值
<div ng-repeat="value in innerList" ng-init="innerIndex = $index">

ngNonBindable :防止aJS處理{{ }}內的資料(下面僅輸出為1+2)
<div ng-non-bindable>Ignored: {{1 + 2}}</div>

ngPluralize :簡單化輸出資訊(例如像臉書3個人說讚/ABC、CDE與其他兩個人說讚)
<ng-pluralize count="personCount"
when="{'0': 'Nobody is viewing.',
'one': '1 person is viewing.',
'other': '{} people are viewing.'}">
</ng-pluralize><br>

ngRepeat :將陣列資料輸出(以類似於PHP的mysqli_fetch_assoc方式)
<li class="animate-repeat" ng-repeat="friend in friends | filter:q">

ngShow :當打勾時顯示指定物件
<div class="check-element animate-show" ng-show="checked">

ngHide :當打勾時隱藏指定物件
<div class="check-element animate-show" ng-hide="checked">

ngStyle :當打勾時顯示特定CSS樣式
<input type="button" value="clear" ng-click="myStyle={}">

ngSwitch :下拉式選單,自動指向特定物件或是值
<div class="animate-switch-container" ng-switch on="selection">
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>

ngTransclude :將function內的目標區塊(<pane>)替換成template替換區塊
angular.module('transclude', []).directive('pane', function(){
                 return {
                 restrict: 'E',
                 transclude: true,
                 scope: { title:'@' },
                 template: '<div style="border: 1px solid black;">' +
                                      '<div style="background-color: gray">{{title}}</div>' +
                                      '<div ng-transclude></div>' +
                                      '<div ng-transclude></div>' +
                                      '</div>'
                  };
});

<pane title="{{title}}">{{text}}</pane>

Pane裡面的內容會被替換成template的內容

script :將<script>內的資料存入至$templateCache,使ngInclude, ngView或是宣告時可以直接使用**
<script type="text/ng-template" id="/tpl.html">

select :自動將<select>內新增指定項目
<select ng-model="" [name=""][required=""][ng-required=""][ng-options=""]>...</select>