AngularJS內建指令

這篇日誌簡單記錄了一些內建指令，先使用起來，再談一些有趣的東西。

內建指令

所有的內建指令的字首都為ng，不建議自定義指令使用該字首，以免衝突。

首先從一些常見的內建指令開始。

先列出一些關鍵的內建指令，順便簡單說說作用域的問題。

ng-model

將表單控制項和當前作用域的屬性進行繫結，這麼解釋似乎也不太正確。

但先不要管咬文嚼字，用起來倒是易懂，例如:

}

該指令被呼叫時會初始化內部作用域。

這個指令一般會出現在比較小的應用中，比如給個demo什麼的...當然也可以作為雙向資料繫結時候 設定預設值

i'm a/an }

ng-controller

我們用這個指令在乙個dom元素上裝上controller。

ng-controller必須有乙個表示式作為引數，另外通過$scope來繼承上級$scope的方法和屬性什麼的，$rootscope也包括在內。

下面只是乙個簡單的例子，ancestor無法訪問child的作用域。

}}}

}.controller('childcontroller', function($scope) )
.controller('ancestorcontroller', function($scope) );

如果場景再稍微複雜一點點，比如乙個父表單中有多個子表單，子表單中有3個驗證通過時父表單便可以提交。

但是，ng-disabled

像這種只要出現則生效的屬性，我們可以在angularjs中通過表示式返回值true/false令其生效。

禁用表單輸入字段。

通過表示式返回值true/false將表單輸入欄位設為唯讀。

弄個例子，3秒後變成唯讀.

.run(function($rootscope,$timeout),3000)

})

這個是給用的，比如..

給裡面的用的，例子:

i'm full stack engineer

front-end
back-end
full stack !!!

根據表示式顯示/隱藏html元素，注意是隱藏，不是從dom移除，例如:

1+1=2

you can't see me.

不是html那套on***之類的，而是ng-***。

結合ng-model使用，以ng-change為例:

}

}

其實這個也是乙個指令，也許覺得和ng-bind差不多，但頁面渲染略慢時可能會被看到。

另外，}的performance遠不如ng-bind，只是用起來很方便。

ng-bind

ng-bind的行為和}差不多，只是我們可以用這個指令來避免fouc(flash of unrendered content)，也就是未渲染導致的閃爍。

ng-cloak

ng-cloak也可以為我們解決fouc。 ng-cloak會將內部元素隱藏，直到路由呼叫對應的頁面。

ng-if

如果ng-if中的表示式為false，則對應的元素整個會從dom中移除而非隱藏，但審查元素時你可以看到表示式變成注釋了。

如果相進行隱藏，可以使用ng-hide。

無法審查到該元素

可審查

單獨使用沒什麼意思，下面是例子:

012

3

是遍歷集合，給每個元素生成模板例項，每個例項的作用域中可以用一些特殊屬性，如下:

$index

$first
$last
$middle
even
odd

起初我在乙個文字域中弄了個ng-model，然後像這樣在href裡面寫了進去。

其實這樣href和ng-href看不出什麼區別，所以我們可以試試這樣:

.run(function($rootscope, $timeout) , 2000);

})

大同小異，即表示式生效前不要載入該資源。

例子(ps: 不錯! ):

《Angular JS 權威教程》 內建指令

一 基礎ng指令 1.ng disable，使用ng disabled可以把disabled屬性繫結到以下表單輸入欄位上 普通html，在以下表單控制項中只要出現了disable屬性就會禁用該控制項，而使用ng disable時只有當屬性值為true時才會禁用繫結的控制項。2.與ng disable...

AngularJS的常見指令

angularjs的指令 指示，命令 指揮示意要做一件事情！指令 就是擴充套件了html的基本功能，通過額外的標籤 屬性來增強html功能 angular的指令在頁面中體現出來就是乙個標籤 屬性 class名稱 注釋等等 1.控制指令，用於angular應用程式載入流程控制 2.渲染指令，用於ang...

Angular JS 中 指令詳解

angular js的強大功能就在於其可以自定義很多指令，現在就指令做一下詳細的剖析。乙個angular js 指令 directive 需要指定乙個唯一的名字 mydirective 和乙個函式，其中返回乙個物件，該物件包含該指令應有的一些行為，具體參見如下所有的屬性。directive mydi...