SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();AngularJSで入力項目にフォーカスを設定したい。
JQueryではこんな感じになると思う。
$(document).ready( function() {
$(“#inputText”).focus()
});
至ってシンプルだ。しかし、AngularJSでは基本的にDOM操作はしない。Controllerにこのコードを書く事はできるが、スマートは方法とはされていない。このような場合、Directivesを作成するのが正しいやり方だ。

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

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はフォーカスを設定して、全選択も行うようにしている。