AngularJS の binding がこうだったらいいのになという動きをしてくれた話
ngRepeat を使った以下のようなテンプレートがあるとします。
tweet の内容、Like かどうか、Like ボタンをテーブルで表示します。
<tr ng-repeat="tweet in tweets"> <td>{{tweet.content}}</td> <td>{{tweet.is_liked}}</td> <td><button ng-click="like(tweet)">Like</td> </tr>
コントローラでは API を使って tweet を取得する部分と、ngClick のイベントハンドラを実装します。
$http.get("some_api").success(function(data) { $scope.tweets = data; }); $scope.like = function(tweet) { tweet.is_like = true; };
これで、ある tweet の Like ボタンを押すと、その tweet の [Like かどうか] というビューだけが更新されました。
当たり前の話なんだろうけど、なんとなく ngModel ディレクティブでバインディングしたり、コントローラでインスタンス化したモデル(今回の例で言うと $scope.tweets)が更新された時のみ対応するビューがリフレッシュされるものだと思っていたので、ngRepeat で作ったビューの細かな箇所がピンポイントでリフレッシュされたことに驚いたのでした。