web-dev-qa-db-ja.com

AngularJSディレクティブで子要素を見つける

私はディレクティブで作業していますが、パラメーターelementを使用してクラス名でその子を見つけるのに問題があります。

.directive("ngScrollList", function(){
    return {
        restrict: 'AE',
        link: function($scope, element, attrs, controller) {

            var scrollable = element.find('div.list-scrollable');

            ...
        }
      };
})

タグ名で見つけることができますが、コンソールで見ることができるようにクラス名で見つけることができません：

element.find('div')
[<div class=​"list-viewport">​…​</div>​,<div class=​"list-scrollable">​…​</div>​]
element.find('div.list-scrollable')
[]

そのようなことをする正しい方法はどれでしょうか？ jQueryを追加できることは知っていますが、それでやり過ぎではないかと思っていました。

javascriptangularjsangularjs-directive
60
vtortola

jQlite（angularの「jQuery」ポート）は、クラスによるルックアップをサポートしていません。

1つの解決策は、アプリにjQueryを含めることです。

もう1つはQuerySelectorまたはQuerySelectorAllを使用しています。

link: function(scope, element, attrs) {
   console.log(element[0].querySelector('.list-scrollable'))
}

element配列の最初の項目を使用します。これはHTML要素です。 element.eq(0)は同じ結果になります。

FIDDLE

104
Mosho

リンク関数で、次を実行します。

// link function
function (scope, element, attrs) {
  var myEl = angular.element(element[0].querySelector('.list-scrollable'));
}

また、リンク関数では、$を使用してscope変数に名前を付けないでください。これは、組み込みのangularサービスに固有のangular規則であり、独自の変数に使用するものではありません。

29
pje