Angular js 是一個相當好用的前端開發工具，
之前我在寫html時，
若要即時更新data通常都必須利用JQuery進行DOM元素的抽換，相當不便；
尤其是在一大堆由程式自動產生的表格，更動某筆資料就更費工了。
Angular js所提供的Binding功能，就立刻解決了這一類的需求。
產生的效果如下：
- {{modelName}}(表達式)
- ng-cloak
- ng-bind
- ng-bind-template
- ng-bind-html
最簡單的方式就是使用表達式
不過首先必須要在<head></head>內載入Angularjs的js檔。
<head> <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script> <!-- 原本只要angular.min.js即可，但是因為ng-bind-html需要使用sanitize所以必須在app加上angular-sanitize.min.js--> <script src="http://code.angularjs.org/1.2.0/angular-sanitize.min.js"></script> <meta charset="utf-8" /> </head>
並且在所需要的範圍加上ng-app標籤，不過每個頁面只能存在一個ng-app。
範例如下：
<div ng-app>
//todo
</div>
原始碼如下：
<div >
Sample ng-model----------------<br>
Type in ur Name<input name="input" ng-model="urName"><br>
Hi~ {{urName}}!!!!
</div>
Demo:
Sample ng-model----------------
Type in ur Name
Hi~ {{urName}}!!!!
--------------------------------
當程式越趨複雜，Angular js所使用的表達式越容易被使用者看見，
此時可以在該標籤加上ng-cloak並於Css中設定其樣式，
使其在Angular js尚未載入前，如被遮罩蓋住般，隱藏起來。
待Angular js載入後，會自動去除ng-cloak CSS的設定。
原始碼如下：
CSS設定如下：
Sample ng-cloak ----------------------
Hi~{{cloakValue}}
How r u ?
--------------------------------------
不過更好的方式應該是使用ng-bind，
ng-bind是將model bind在標籤內，
若未載入Angular js就不會呈現其內容。
原始碼如下：
Demo:
另外個方式跟表達式比較像，ng-bind-template可以直接將多個表達式撰寫在標籤當中，
必且也可以避免Angular js未載入時，
讓使用者看到表達式的窘境。
原始碼如下：
Demo:
-------------------------------------------------
另外，若是希望能夠完整呈現使用者自訂的html標籤，
則可以使用ng-bind-html。
不過比較麻煩的是，必須要將原本的ng-app改為ng-app="ngSanitize"，
必且在<head></head>標籤內載入：
<script src="http://code.angularjs.org/1.2.0/angular-sanitize.min.js"></script>
原始碼如下：
Demo:
Sample ng-model----------------
Type in ur Name
Hi~ {{urName}}!!!!
當程式越趨複雜，Angular js所使用的表達式越容易被使用者看見，
此時可以在該標籤加上ng-cloak並於Css中設定其樣式，
使其在Angular js尚未載入前，如被遮罩蓋住般，隱藏起來。
待Angular js載入後，會自動去除ng-cloak CSS的設定。
原始碼如下：
<div >
Sample ng-cloak ----------------------
<input ng-model="cloakValue" type="txt" />
Hi~<span ng-cloak="">{{cloakValue}}</span>
How r u ?
</div>
CSS設定如下：
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Demo:Sample ng-cloak ----------------------
Hi~{{cloakValue}}
How r u ?
--------------------------------------
不過更好的方式應該是使用ng-bind，
ng-bind是將model bind在標籤內，
若未載入Angular js就不會呈現其內容。
原始碼如下：
<!-- Sample ng-bind --> <div > Sample ng-bind ----------------------<br> <input type="txt" ng-model="bindValue"><br> Hi~<span ng-bind="bindValue"></span> How r u ? </div>
Demo:
Sample ng-bind ----------------------
Hi~
How r u ?
-----------------------------------------
Hi~
How r u ?
-----------------------------------------
另外個方式跟表達式比較像，ng-bind-template可以直接將多個表達式撰寫在標籤當中，
必且也可以避免Angular js未載入時，
讓使用者看到表達式的窘境。
原始碼如下：
Demo:
<!-- Sample ng-bind-template -->
<div class="box">
Sample ng-bind-template ----------------------<br>
<input type="txt" ng-model="tmp1"><br>
<input type="txt" ng-model="tmp2"><br>
temp1 & temp 2 :<span ng-bind-template="{{tmp1}} {{tmp2}}"></span>
</div>
Sample ng-bind-template ----------------------
temp1 & temp 2 :
temp1 & temp 2 :
-------------------------------------------------
另外，若是希望能夠完整呈現使用者自訂的html標籤，
則可以使用ng-bind-html。
不過比較麻煩的是，必須要將原本的ng-app改為ng-app="ngSanitize"，
必且在<head></head>標籤內載入：
<script src="http://code.angularjs.org/1.2.0/angular-sanitize.min.js"></script>
原始碼如下：
<!-- Sample ng-bind-html --> <div class="box" > Sample ng-bind-html ------------<br> <input type="txt" ng-model="bindhtml" ng-init="bindhtml='<b>Hi! Html</b>'"><br> <span ng-bind-html ="bindhtml"></span> </div>
Demo:
Sample ng-bind-html ------------
沒有留言:
張貼留言