AngularJS で時計を作る (その二)

前回、AngularJS を使って時計を作ろうとしたら、壊れた時計ができました。$interval を利用することで解決することが分かりましたが、今度はそれ以外のアプローチで解決しようと思います。

  1. angular.module('angular2App')
  2. .controller('MainCtrl', function ($scope, $log) {
  3. var displayTime = function () {
  4. $log.info('Show time');
  5. $scope.time = Date();
  6. };
  7.  
  8. displayTime();
  9. setInterval(displayTime, 1000);
  10. });

これです。と言ってもとても簡単で、

$apply関数を呼び出すだけです。

  1. angular.module('angular2App')
  2. .controller('MainCtrl', function ($scope, $log) {
  3. var displayTime = function () {
  4. $log.info('Show time');
  5. $scope.time = Date();
  6. };
  7.  
  8. displayTime();
  9. setInterval(function () {
  10. $scope.$apply(displayTime);
  11. }, 1000);
  12. });

ようするに、AngularJS は常にオブジェクトの値の変更を監視しているわけでなく、明示的に指定したタイミングでしか変更を検出しないようです。イベントとか $interval とかの AngularJS 組み込みのものは暗黙的に呼び出しているようで、何もしなくても OK のようです。

ここまでやって、AngularJS のデータバインドを支える $apply - AngularJS Ninja Blog の存在に気がつきました...

というわけで、AngularJS 対応でない非同期ライブラリを使う場合はこの $apply 関数が必要になるわけです。実際にアプリを組む場合は結構お世話になりそうですね。

と、ここでふと気が付きました。AngularJS から Apache Cordova の機能を呼び出すngCordova はこの $apply 関数を暗黙的に呼び出しているんじゃないかと。次回はそのあたり調べてみます。

コメントを追加

Filtered HTML

  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 使用できるHTMLタグ: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <img>
  • 次のタグを使用してソースコード構文をハイライトすることができます。: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby> The supported tag styles are: <foo>, [foo].
  • 行と段落は自動的に折り返されます。

Plain text

  • HTMLタグは利用できません。
  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 行と段落は自動的に折り返されます。
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
イメージ CAPTCHA
Enter the characters shown in the image.