jQuery find method not working in AngularJS directive

Question

I am having trouble with angularjs directives finding child DOM elements with the injected angular element   For example I have a directive like so   myApp directive  test   function          return           restrict   A           link  function  scope  elm  attr                var look   elm find   findme                 elm addClass  addedClass                console log look                          and HTML such as     lt div ng-app  myApp  gt       lt div test gt TEST Div          lt div id  findme  gt  lt  div gt       lt  div gt   lt  div gt    I have access to the element which is proffed by adding a class to it  However attempting to access a child element produces an empty array in the var look   JSFiddle demo is here   Why is something so trivial not working properly

User · Answer

I used   elm children   class-name-or-whatever      to get children of the current element

User · Answer

If anyone is looking to grab the scope off of a  controller as  element    something like this    lt div id  firstctrl  ng-controller  firstCtrl as vm  gt      use the following   var vm   angular element document querySelector   firstctrl    scope   vm

User · Answer

find   - Limited to lookups by tag name you can see more information  https   docs angularjs org api ng function angular element  Also you can access by name or id or call please following example   angular element document querySelector   txtName    attr  class    error

User · Answer

From the docs on angular element      find   - Limited to lookups by tag name   So if you re not using jQuery with Angular  but relying upon its jqlite implementation  you can t do elm find   someid     You do have access to children    contents    and data   implementations  so you can usually find a way around it

User · Answer

You can do it like this    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                         lt div ng-app  myApp  ng-controller  Ctrl  gt      lt div test gt TEST Div        lt div id  findme  gt   aaa   lt  div gt      lt  div gt   lt  div gt    http   jsfiddle net FZGKA 133

User · Answer

Before the days of jQuery you would use       document getElementById  findmebyid      If this one line will save you an entire jQuery library  it might be worth while using it instead   For those concerned about performance  Beginning your selector with an ID is always best as it uses native function 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

User · Answer

You can easily solve that in 2 steps   1- Reach the child element using querySelector like that  var target   element 0  querySelector  tbody tr first-child td    2- Transform it to an angular element object again by doing  var targetElement   angular element target   You will then have access to all expected methods on the targetElement variable

[javascript] jQuery find() method not working in AngularJS directive

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-directive