AngularJSディレクティブでjQuery find（）メソッドが機能しない

anglejsディレクティブが注入された角度要素を持つ子DOM要素を見つけるのに問題があります。例えばAngularJSディレクティブでjQuery find（）メソッドが機能しない

私はそうのようなディレクティブを持っている：私はそれにクラスを追加することにより、proffedされる要素へのアクセス権を持っている

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

次のような

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

とHTMLを。しかし、子要素にアクセスしようとすると、varルックで空の配列が生成されます。

JSFiddle demo is here。

何故そんなに簡単ではないのですか？

出典

2013-02-14 Ray Garner

docs on angular.element：

find() - あなたは角度でのjQueryを使用しているが、そのjqlite実装に依存していない場合

ので、タグ名による検索に限り、あなたがすることはできませんdo elm.find('#someid')。

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

出典

2013-02-14 00:52:28 satchmorun

ありがとうございます。私の場合、実際にはJQueryを含んでいましたが、それは明らかに問題であるanglejsの後に含まれていました。また、JQliteで見つからなかったことがドキュメントで指定されていないことを認識しませんでした。「タグ名によるルックアップに限定されています」と言っているのは、私がIDタグ名を意味すると考えていただけですか？ –

私のために解決策を明確にするためには、

のjQueryの日前に、使用します。

document.getElementById('findmebyid');

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

パフォーマンスに関する懸念がある場合： IDを使用してセレクタを開始すると、ネイティブ関数document.getElementByIdが使用されるため、常に最適です。

// 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

出典

2014-03-04 22:45:51 Zymotik

これは悪いです！ getElementByIdはルートから始まるHTML文書全体を検索し、テンプレート内の検索に限定されません – Spock

私は 'var $ el = $（ 'div.robotarm'、 '#container'）; – Dementic

@ SpockおそらくjsPerfを使ってデモをすることができますか？ getElementByIdは内部的に索引付けされているため、DOMはスキャンされません。 – Zymotik

find() - あなたが名前またはIDまたはお電話でアクセスすることができますより多くの情報も https://docs.angularjs.org/api/ng/function/angular.element

を見ることができますタグ名による検索に限定してください以下の例：

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

出典

2014-09-12 07:26:21 user3454062

私はあなたが簡単に2つのステップでそれを解決することができ、現在の要素

出典

2015-01-23 13:36:05 simonpkerr

+10

jqLiteはchildren（）のセレクタを受け入れません。すべての直接の子要素を取得するだけです。 – Frankey

http://jsfiddle.net/FZGKA/167/ – ShaneK

の子供を取得するために

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

を使用：

1-そのようquerySelectorを使用して、子要素をリーチ： var target = element[0].querySelector('tbody tr:first-child td')

2これをdoでもう一度angular.elementオブジェクトに変換します。 var targetElement = angular.element(target)

targetElement変数のすべての予想されるメソッドにアクセスできます。

出典

2015-06-23 17:08:59

これは許可されたアンサーです。 jQueryを使用せず、見つけたい要素にIDがあることを強制しません。 – kboom

これは非常に良い答えです。よくやった – Arcagully

これは私に多くの時間を保存しました、ありがとう。 – Liz

-3

あなたはこのようにそれを行うことができます。

var myApp = angular.module('myApp', []) 
    .controller('Ctrl', ['$scope', function($scope) { 
    $scope.aaa = 3432 
}]) 
.directive('test', function() { 
    return { 
     link: function (scope, elm, attr) { 
      var look = elm.children('#findme').addClass("addedclass"); 
      console.log(look); 
     } 
    }; 
}); 

<div ng-app="myApp" ng-controller="Ctrl"> 
    <div test>TEST Div 
     <div id="findme">{{aaa}}</div> 
    </div> 
</div>

http://jsfiddle.net/FZGKA/133/

出典

2015-06-24 13:28:46 Steve

期待通りに動作しません：http://jsfiddle.net/FZGKA/167/クラスをすべての子に追加するだけです。セレクタは関係ありません – ShaneK

-2

誰でも要素「などのコントローラ」がオフの範囲をつかむしようとしている場合は、...このような何か：

<div id="firstctrl" ng-controller="firstCtrl as vm">

を使用します。

var vm = angular.element(document.querySelector('#firstctrl')).scope().vm;

出典

2016-01-21 18:44:24 Helzgate

これがどのように関係するかわかりません。子スコープやcontrollerAs構文を取得することについての言及を見ることができません。何かを見逃してしまって、間違っていると証明されてしまったかもしれません。 – perry

AngularJSディレクティブでjQuery find（）メソッドが機能しない

答えて

関連する問題