AngularJSのjqLiteの使い方と3つの注意点

jqLiteとは

AngularJSで使用できる軽量版jQuery。

jqLiteの使い方

以下のように要素をangular.element()に入れてjqLiteのメソッドを使用する。

var foo = document.getElementById('foo');
var fooElem = angular.element(foo);
fooElem.addClass('bar');

ただし、通常のjQueryとは使い方が異なるため以下の3つの点に注意が必要だ。

使用できるメソッドが少ない

jqLiteで使用できるメソッドはバージョン1.4の時点では以下の35種類しかない。

• addClass()
• after()
• append()
• attr()
• bind()
• children()
• clone()
• contents()
• css()
• data()
• detach()
• empty()
• eq()
• find()
• hasClass()
• html()
• next()
• on()
• off()
• one()
• parent()
• prepend()
• prop()
• ready()
• remove()
• removeAttr()
• removeClass()
• removeData()
• replaceWith()
• text()
• toggleClass()
• triggerHandler()
• unbind()
• val()
• wrap()

バージョンによって使用できるメソッドが異なる

バージョンが古いと使用できるメソッドはさらに少なくなる。以下はバージョン別の新規追加メソッド。

バージョン	追加メソッド
v1.3.0	detach()
v1.2.6	one()
v1.2.5	empty()
v1.2.0	on(), off()
v1.0.3	triggerHandler()
v1.0.0	jqLite自体は初期のころからある

#id, .class指定ができない

jQueryであればelem.find('.item').addClass('red')のような記述が可能だが、jqLiteではfindなどで使えるのはタグだけで#id, .classは使用できない。

そのためdirectiveなどでクリックしたときに子要素にclassを追加したい場合は以下のような記述になる。

app.directive('addRed', function() {
  return {
    link: function(scope, elem) {
      elem.on('click', function() {
        var item = angular.element(elem[0].querySelector('.item'));
        // elem.find('.item').addClass('red')ではない
        item.addClass('red');
      });
    }
  };
});

クリックしたときに子要素にclassを追加するサンプル

ちなみにjqLiteはAngular 2.0からなくなります。