JavaScript (HTML5): AngularJS テンプレート文法

未完

■ ng-init ディレクティブ

{{ someModel }} の初期値を指定できる。Ajax とかフォームでゴニョゴニョするときとかに。

<!doctype html>
<html ng-app>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<div ng-init="unko='弊社の経営理念について'">
{{unko}}
</html>

 

■ ng-cloak ディレクティブ

{{ someModel }} みたいなのがゴチャゴチャって表示されないようにすることができる。

ngCloak

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

このスタイルが AngularJS を読み込むと自動的に当たるので、テンプレート変数展開前、表示したくないものには以下 ng-cloak を設定する。

<div class="ng-cloak" ng-cloak>{{ unko }}</div>

 

■ ng-src, ng-href ディレクティブ

img src 属性に AngularJS のテンプレート変数を入れても HTML のパースの方が先行するのでうまくいかない。
そんなときに ng-src を使う。

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

また a タグの href の代わりとして ng-href がある。

 

■ ng-pluralize ディレクティブ

単数系・複数形や、0/1/2/それ以上、とかで表示の出し分けができる。
日本語だとひとつ/ふたつ/みっつとか、ついたち/ふつか/みっかとか。

<!doctype html>
<html ng-app>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<div ng-init="userCount=2; user1='hage'; user2='hoge'">
<ng-pluralize count="userCount" offset=2 when="{'0': '誰もいいねするはずもなかった',
                                                '1': '{{user1}}からの施しをうけた',
                                                '2':'{{user1}}と{{user2}}が空気をよんだ',
                                                'one':'{{user1}}、{{user2}}とあと一人がついにいいね!',
                                                'other':'{{user1}}、{{user2}}とあと{}人がいいね!ウワアアアア!!'}"></ng-pluralize>
</html>

 

■ ng-class ディレクティブ

class 属性を動的に操作可能にするディレクティブ。

<!doctype html>
<html ng-app>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<style>.disable { color: #bbbbbb; }</style>
<div ng-init="state='disable'">
    <div ng-class="state">unko</div>
</div>
</html>

 

■ ng-click, ng-dblclick, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-mouseover, ng-mouseup, ng-blur, ng-keydown, ng-keyup, ng-keypress, ng-focus, ng-submit ディレクティブ

onClick などのイベント系をバインドできます。

<!doctype html>
<html ng-app>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<div ng-init="count=0">

<pre>{{count}}</pre>

<p>
<button ng-click="count = count + 1">クリック</button>
<button ng-dblclick="count = count + 1">ダブルクリック</button>
</p>
<p>
<button ng-mousedown="count = count + 10" ng-mouseenter="count = count + 10" ng-mouseleave="count = count + 10" ng-mousemove="count = count + 1" ng-mouseover="count = count + 10" ng-mouseup="count = count + 10">button</button>
<input type="checkbox" ng-change="count = count + 1" ng-model="checkboxData">
</p>
<p>
<input type="text" ng-blur="count = count + 1" ng-keydown="count = count + 1" ng-keyup="count = count + 1">
<input type="text" ng-focus="count = count + 1" ng-keypress="count = count + 1">
</p>
<form ng-submit="count = count + 100"><input type="submit"></form>

</div>
</html>