Accessing element in an Angular directive with jQuery

Question

I have a form inside a nested directive (in an Ionic/Angular project)

<ion-content class="scroll-content ionic-scroll  has-header">
  <recipe-form>
    <form id="example-form" action="#" class="ng-pristine ng-valid">
    </form>
  </recipe-form>
<div>

But I cannot access this for via jQuery.

I tried the following without success:

$(function () {
  #$('#example-form')
  #angular.element(document.querySelector('#example-form'))
  #angular.element.find('#example-form') 
  #angular.element.find('example-form')
  #angular.element(document.querySelector('example-form')) 
}

I also have found several SO questions, and almost all of them are solved by using syntax angular.element(document.querySelector(<element id>))

But for me it gives a blank array []

I'm loading my js file in the head section and after jQuery.

Update

However, this following method I have in the same file for button click works as expected

$( document ).ready(function() {
  $(document).on('click', 'a.next', function(e){
    arr = [];
    arr = $('.card.recipe-slider');
    current_card = $(this).closest('.card')[0];
    id = current_card.dataset.id;

    if (validateInput(current_card)){
      $(arr[id]).addClass('active');
      $(current_card).removeClass('active');
    } else {
    }

  })

});

Does it work if you put your scripts at the bottom of the `body`? — rwacarter, Jan 21 '15 at 13:27
Where is `$(function () { ... }` located and when is it executed? — tasseKATT, Jan 21 '15 at 21:09
@rwacarter, sorry for the late reply, No .. it doesnot work ;(. — sameera207, Jan 21 '15 at 21:09
My guess is that you are trying to find the element before it actually exists in the DOM. — tasseKATT, Jan 21 '15 at 21:11
@tasseKATT, hi, its in a separate js file and its loading when the page loads. (I checked with chrome terminal) — sameera207, Jan 21 '15 at 21:11
@tasseKATT, yes form is visible , and you are correct, form is not visible when the js loads initially. but my understand is `$(function () { ... }` should take care of that, or am I missing something ? .. thanks for the reply — sameera207, Jan 21 '15 at 21:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69349/discussion-between-tassekatt-and-sameera207). — tasseKATT, Jan 21 '15 at 21:15
@sameera207 Your update proves that the element does not exist in the DOM at the time you are trying to find it.. What are you wanting to do with the `$('#example-form')` once you have it? — rwacarter, Jan 21 '15 at 21:17

score 0 · Accepted Answer · answered Jan 23 '15 at 11:44

Finally I was able to find the solution for my question. This main point I was missing is, you cannot directly access form elements via JQuery inside a directive.

So with the outstanding help of @tasseKATT and with the following article I was able to get it running

Following is my final code (I was trying to add Jquery steps plugin)

angular.module('directive.recipeForm',[])
  .directive('recipeForm', function(){
    return {
       restrict: 'E',
       scope: false,
       link: function(scope, element){
         var form = $("#example-form");
         form.children("div").steps({
           headerTag: "h3",
           bodyTag: "section",
           transitionEffect: "slideLeft",
           onStepChanging: function (event, currentIndex, newIndex)
           {

           },
           onFinishing: function (event, currentIndex)
           {

           },
           onFinished: function (event, currentIndex)
           {

           }
         });
       },
       controller: 'newRecipeCtrl',
       templateUrl: 'templates/directives/recipe_form.html'
    }
  });

Accessing element in an Angular directive with jQuery

1 Answers1