2016年3月3日木曜日

[AngularJS1.3]One-Time Data Binding(一回だけ値をバインドして、変更は監視しない)

AngularJS1.3から、One-Time Data Bindingなるモードが増えたらしい(知らなかった)。


これは、初回の一度のみデータをバインドして、その後モデルに変更があってもバインド済みの箇所の値は変更されないらしい。
データの変更監視がなくなる分、パフォーマンスが良くなるらしい。

使い方は、下のコードのように::を付加するだけなので簡単です。

この例だと、入力欄の値が変更されても::app.nameの部分は値が変更されません。
あと、ng-repeatの部分もapp.usersに要素が増えたとしても初期表示のまま変更されません。
<p>{{ app.name }}</p>
  <p>{{ ::app.name }}</p>
  <input type="text" ng-model="app.name">

  <div ng-repeat="user in ::app.users">
    <p>{{ user.name }}</p>
  </div>