angular.element()のjQueryを読み込んだ場合とそうでない場合（jqLite）の動作の違い

できるだけページを軽量化するためにjQueryを読み込まないようにしようと思った。しかし、jQueryは便利なので捨てがたいなと思っていた。そんな時、angular.element()というメソッドがあることに気がついた。

AngularJS: API: angular.element

AngularJSは内部でjqLiteというjQueryのサブセット版を持っていて、angular.element()はそれを使ってjQueryのオブジェクトを返してくれるらしい。

ただ実際に使ってみると、jQueryを読み込んだ場合とそうでない場合で動作が違うのでハマった。

jQueryを読み込んでいる場合はこのように#targetを取得できるが、そうでない場合、つまりjqLiteのみの場合は取得できない。

var $elm = angular.element('#target');

要するにjQueryを読み込んでいる場合は次と等価だ。

var $elm = $('#target');

一方、jqLiteのみの場合はこのようにする。

var elm = document.getElementById('target');
var $elm = angular.element(elm);

Wraps a raw DOM element or HTML string as a jQuery element.

というのはそういう意味だったのか！とやっと分かった(^^);