Angularjsでフォーカスを設定する。Directivesを使ってみた。

AngularJSで入力項目にフォーカスを設定したい。

JQueryではこんな感じになると思う。

$(document).ready( function() {
   $("#inputText").focus()
});

至ってシンプルだ。しかし、AngularJSでは基本的にDOM操作はしない。Controllerにこのコードを書く事はできるが、スマートは方法とはされていない。このような場合、Directivesを作成するのが正しいやり方だ。

AngularJSの説明を読んでみたが、要はDirectivesとはhtmlを拡張するのだ。と書いてあるがよく分からなかった。いつものようにコードを書いてみると意味が理解できた。

<input type="text" id="inputText" nc-init-focus>

nc-init-focusなんて属性は通常では存在していないが、Directivesを書くことでhtmlを拡張し、動きを定義できる。View部分の操作をControllerに持ち込まなくていいし、モジュール化されているので、再利用しやすい。

フォーカスを設定するDirectivesは以下の通り

angular.module('myApp.directives', []).
 directive('ncInitFocus', [function() {
  var timer;

  return function(scope, elm, attr) {
   if (timer) clearTimeout(timer);

   timer = setTimeout(function() {
    elm.focus();
    elm.select();
   }, 0);
  };
 }]);

elmが渡されるので、そこでDOM操作をする。 このDirectivesはフォーカスを設定して、全選択も行うようにしている。