VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

AngularJS同梱のjqLiteの概要

wp-admin

カスタムディレクティブでHTML要素に対して各種操作を行うjqLiteを使用する場合があります。jqLiteメソッドの使用方法をまとめました。

※目次をクリックすると目次の下部にコンテンツが表示されます。

jqLiteの概要
・AngularJSに同梱されているjQueryの簡易版。
https://docs.angularjs.org/api/ng/function/angular.element
　
・カスタムディレクティブのlink関数の引数に指定して使用できます。
　
下記例のlink関数の引数elementは、カスタムディレクティブが適用される対象のHTML要素のjqLiteオブジェクトで、jqLiteを使ってDOM操作をナビゲート、操作する事が出来ます。
　
例）
myApp.directive(“ディレクティブ名”, function () {
　return {
　　link: function (scope, element, attrs) {
　　　：
DOMをナビゲートするjqLiteメソッド
①children()
　
・対象の要素の子要素をリターン。
　
・jQueryが提供しているselectorの指定は出来ない。
使用例）
var members = element.children();
for (var i = 0; i ②parent()
　
・対象要素の親要素をリターン。
　
・jQueryが提供しているselectorの指定は出来ない。
　
③eq(index)
　
・要素のコレクションから指定したインデックスの要素をリターン。
使用例）
if (members.eq(i).text() == “Oranges”) {
　：
　
・eqメソッドは、コレクションの中から指定したインデックスのjqLiteオブジェクトをリターンするので、リターン結果に対してもjqLiteのメソッドを使用できる。
※members[i]の形でJavaScriptの配列としてアクセスするとHTMLElementオブジェクトがリターンされる。
　
④find(tag)
　
・対象要素のすべての子孫から指定したタグ名の要素をリターン。
　
・jqLiteではタグ名の検索のみ可。
　
⑤next()
　
・対象要素の次の兄弟要素をリターン。
　
・jQueryが提供しているselectorの指定は出来ない。
HTML要素を操作するjqLiteメソッド
（設定、取得）
　
①attr(name)、attr(name, value)、prop(name)、prop(name, value)
　
●attr(name)、prop(name)
　
・対象jqLiteオブジェクトの最初の要素が持つ指定した属性の値を返す。
　
●attr(name, value)、prop(name, value)
　
・対象jqLiteオブジェクトのすべての要素の指定した属性に値を設定する。
　
②css(name)、css(name, value)
　
●css(name)
　
・対象jqLiteオブジェクトの最初の要素が持つ指定したCSS属性の値を返す。
　
●css(name, value)
　
・対象jqLiteオブジェクトのすべての要素の指定したCSS属性に値を設定する。
　
③val()、val(value)
　
●val()
　
・対象jqLiteオブジェクトの最初の要素が持つ指定したvalue属性の値を返す。
　
●val(value)
　
・対象jqLiteオブジェクトのすべての要素のvalue属性に値を設定する。
　
④text()、text(value)
　
●text()
　
・対象jqLiteオブジェクトのすべての要素から結合されているテキストを返す。
　
●text(value)
　
・対象jqLiteオブジェクトのすべての要素にテキストを設定する。
　
（追加、削除、トグル）
　
⑤addClass(name)
　
・対象jqLiteオブジェクト内のすべての要素に指定したクラスを追加する。
　
⑥removeAttr(name)
　
・対象jqLiteオブジェクト内のすべての要素の指定した属性を削除する。
　
⑦removeClass(name)
　
・対象jqLiteオブジェクト内のすべての要素の指定したCSSクラスを削除する。
　
⑧toggleClass(name)
　
・対象jqLiteオブジェクト内のすべての要素に対し、指定したCSSクラスが無ければ追加し、あれば削除する。
HTML要素を追加・削除するjqLiteメソッド
①after(elements)
　対象のjqLiteオブジェクトのHTML要素の後ろに引数で指定したHTML要素を追加する。
　
②append(elements)
　対象のjqLiteオブジェクトのHTML要素に、引数で指定したHTML要素を一番後ろの子要素として追加する。
　
③clone()
　対象のjqLiteオブジェクトのクローンを作成し、リターン。
　
④prepend(elements)
　対象のjqLiteオブジェクトのHTML要素に、引数で指定したHTML要素を一番始めの子要素として追加する。
　
⑤remove()
　対象のjqLiteオブジェクトのHTML要素をDOMから削除する。
　
⑥replaceWith(elements)
　対象のjqLiteオブジェクトのHTML要素を引数で指定したHTML要素に置換する。
　
⑦wrap(elements)
　対象のjqLiteオブジェクトのHTML要素を引数で指定した指定したHTML要素で囲む。
　
●<div>要素にリストを追加するカスタムディレクティブの例
　
（生成したい内容） 
<div demo-jqlite="">
  <ol>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>jqLite</li>
  </ol>
</div>

　
（問題のあるコード）

  <script>
  angular.module("exampleApp", [])
    .directive("demoJqlite", function () {
      return function (scope, element, attrs) {
        element.append("<ol>");
        for (var i = 0; i < scope.names.length; i++) {
          element.children().append("<li>").children().text(scope.names[i]);
        }
      }
    })
    .controller("defaultCtrl", function ($scope) {
      $scope.names = ["JavaScript", "jQuery", "jqLite"];
    })
  </script>
</head>
<body ng-controller="defaultCtrl">
  <h3>Demo jqLite</h3>
  <div demo-jqlite></div>
</body>

　
（実行結果）

<div demo-jqlite="">
  <ol>
    <li>jqLite</li>
    <li>jqLite</li>
    <li>jqLite</li>
  </ol>
</div>

　
（原因）

for (var i = 0; i < scope.names.length; i++) {
  element.children().append("<li>").children().text(scope.names[i]);

append(“<li>”).children()の部分で親要素の<ul>要素のすべての子要素をリターンするため、<li>要素のすべてにテキストを追加してしまっている。
　
これを解決するには、children()メソッドの引数にセレクタを指定して子要素を絞りこむ必要があるのですが、jqLiteのchildlen()メソッドはセレクタの指定はサポートされていません。
　
（修整後）

for (var i = 0; i < scope.names.length; i++) {
  var liElem = angular.element("<li>");
  olElem.append(liElem);
  liElem.text(scope.names[i]);
}

修整前のサンプルでは、カスタムディレクティブのリンク関数の引数で渡された”element”のjqLiteオブジェクトに対し操作していましたが、angular.element(html)メソッドを使って引数で指定したHTML要素のjqLiteオブジェクトを作成することが出来るので、”element”オブジェクトではなく、この新しく生成したjqLiteオブジェクトに対し操作する事によって回避する事が出来ます。
　
●他のメソッドも使用したサンプル

    <script>
    angular.module("exampleApp", [])
      .directive("demoJqlite", function () {
        return function (scope, element, attrs) {
          element.after("<b>#after-content1#</b>");
          element.after("<b>#after-content2#</b>");
          element.after("<b>#after-content3#</b>");
          element.next().replaceWith("<b>#replaceWith#</b>");
          element.next().next().remove();
          var olElem = angular.element("<ol>");
          element.append(olElem);
          for (var i = 0; i < scope.names.length; i++) {
            var liElem = angular.element("<li>");
            olElem.append(liElem);
            liElem.text(scope.names[i]);
          }
          var prepElem = angular.element("<b>prepend-content</b>");
          element.prepend(prepElem);
          prepElem.wrap("<U></U>")
        }
      })
      .controller("defaultCtrl", function ($scope) {
        $scope.names = ["JavaScript", "jQuery", "jqLite"];
      })
    </script>
  </head>
  <body ng-controller="defaultCtrl">
    <h3>Demo jqLite</h3>
    <div demo-jqlite></div>
  </body>
イベントをハンドルするjqLiteメソッド
①on(events, handler)
　
対象のjqLiteオブジェクトの要素によって発行されたイベントを処理するハンドラーを登録する。
　
jQuery版が提供しているセレクタ、イベントデータ、ネームスペースの機能はサポートしていない。
　
②off(events, handler)
　
対象のjqLiteオブジェクトの要素によって登録されているイベントハンドラーを削除する。
　
jQuery版が提供しているセレクタ、イベントデータ、ネームスペースの機能はサポートしていない。
　
③triggerHandler(event)
　
対象のjqLiteオブジェクトの要素で登録されたイベントハンドラーをトリガーする。
　
●設定例 
<style>
  .demo-jqlite { color: lightpink; font-weight: bold; }
</style>
<script>
angular.module("exampleApp", [])
  .directive("demoJqlite", function () {
    return function (scope, element, attrs) {
　　　　　　：
      }
      var buttons = element.find("button");
      buttons.on("click", function (e) {
        element.find("li").toggleClass("demo-jqlite");
      });
    }
  })
</script>


<div demo-jqlite>
  <button>CSS変更</button>
</div>
モバイルバージョンを終了