AngularJS accessing DOM elements inside directive template

Question

Is there a more  angular  way of selecting DOM elements inside a directive template  For example  say you have this directive   app directive  myDirective   function         return           template    lt div gt  lt ul gt  lt li ng-repeat  item in items  gt  lt  ul gt  lt  div gt            link  function scope  element  attrs                var list   element find  ul                          I used the jQuery style selector to get a hold of the DOM  lt ul gt  element rendered in my template  Is there a better way to do this

User · Accepted Answer

You could write a directive for this  which simply assigns the  jqLite  element to the scope using an attribute-given name   Here is the directive   app directive  ngScopeElement   function        var directiveDefinitionObject          restrict   A        compile  function compile tElement  tAttrs  transclude          return             pre  function preLink scope  iElement  iAttrs  controller                scope iAttrs ngScopeElement    iElement                                       return directiveDefinitionObject        Usage   app directive  myDirective   function         return           template    lt div gt  lt ul ng-scope-element  list  gt  lt li ng-repeat  item in items  gt  lt  ul gt  lt  div gt            link  function scope  element  attrs                scope list 0     scope list is the jqlite element                                scope list 0  is the native dom element                       Some remarks    Due to the compile and link order for nested directives you can only access scope list from myDirectives postLink-Function  which you are very likely using anyway ngScopeElement uses a preLink-function  so that directives nested within the element having ng-scope-element can already access scope list not sure how this behaves performance-wise

User · Answer

This answer comes a little bit late  but I just was in a similar need   Observing the comments written by  ganaraj in the question  One use case I was in the need of is  passing a classname via a directive attribute to be added to a ng-repeat li tag in the template    For example  use the directive like this    lt my-directive class2add  special-class    gt    And get the following html    lt div gt       lt ul gt          lt li class  special-class  gt Item 1 lt  li gt          lt li class  special-class  gt Item 2 lt  li gt       lt  ul gt   lt  div gt    The solution found here applied with templateUrl  would be   app directive  myDirective   function         return           template  function element  attrs               return   lt div gt  lt ul gt  lt li ng-repeat  item in items  class    attrs class2add    gt  lt  ul gt  lt  div gt                       link  function scope  element  attrs                var list   element find  ul                          Just tried it successfully with AngularJS 1 4 9   Hope it helps

User · Answer

I don t think there is a more  angular way  to select an element  See  for instance  the way they are achieving this goal in the last example of this old documentation page          template    lt div gt           lt div class  title  gt   title   lt  div gt           lt div class  body  ng-transclude gt  lt  div gt           lt  div gt         link  function scope  element  attrs               Title element         var title   angular element element children   0

[angularjs] AngularJS accessing DOM elements inside directive template

Examples related to angularjs

Examples related to angularjs-directive