web-dev-qa-db-ja.com

AngularJSディレクティブで動作しないjQuery find（）メソッド

挿入されたangular要素を含む子DOM要素を見つけるanglejsディレクティブで問題が発生しています。

たとえば、次のようなディレクティブがあります。

myApp.directive('test', function () {
    return {
        restrict: "A",
        link: function (scope, Elm, attr) {
            var look = Elm.find('#findme');
             Elm.addClass("addedClass");
            console.log(look);
        }
    };
});

およびHTMLなど：

<div ng-app="myApp">
    <div test>TEST Div
        <div id="findme"></div>
    </div>
</div>

クラスを追加することで提供される要素にアクセスできます。ただし、子要素にアクセスしようとすると、var lookで空の配列が生成されます。

JSFiddleデモはこちら 。

どうしてそんなに些細なことが適切に機能しないのですか？

javascriptangularjsangularjs-directive
45
Ray Garner

angular.elementのドキュメント から：

find()-タグ名による検索に制限

したがって、AngularでjQueryを使用していないが、jqliteの実装に依存している場合は、Elm.find('#someid')を実行できません。

children()、contents()、およびdata()の実装にアクセスできるため、通常はその方法を見つけることができます。

75
satchmorun

2つの手順で簡単に解決できます。

1-次のようなquerySelectorを使用して子要素に到達します：var target = element[0].querySelector('tbody tr:first-child td')

2-次を実行して、angular.elementオブジェクトに再度変換します：var targetElement = angular.element(target)

これで、targetElement変数で期待されるすべてのメソッドにアクセスできます。

27
Felippe Nardi

JQueryの時代以前は、次のものを使用していました。

   document.getElementById('findmebyid');

この1行でjQueryライブラリ全体を保存できる場合は、代わりに使用する価値があるかもしれません。

パフォーマンスが心配な場合：ネイティブ関数document.getElementByIdを使用するため、IDでセレクターを開始するのが常に最適です。

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

http://learn.jquery.com/performance/optimize-selectors/

jsPerf http://jsperf.com/jquery-selector-benchmark/32

13
Zymotik

find()-詳細を参照できるタグ名による検索に限定 https://docs.angularjs.org/api/ng/function/angular.element

また、名前またはIDでアクセスするか、次の例をご覧ください：

angular.element(document.querySelector('#txtName')).attr('class', 'error');
9
user3454062

私は使った

Elm.children('.class-name-or-whatever')

現在の要素の子を取得する

1
simonpkerr