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

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からなくなります。