I'm trying to create a custom directive to use in Ionic framework. My problem is during the linking phase, I'm not able to query inside my template.
My template is the following:
<ion-nav-buttons side="right">
<div class="searchBar">
<div class="searchTxt">
<div class="bgdiv"></div>
<div class="bgtxt">
<input class="searchBox" type="text" />
</div>
</div>
<i class="searchIcon icon placeholder-icon" ng-click="callSearch()"></i>
</div>
</ion-nav-buttons>
My linking function is
link: function(scope, element, attrs){...}
But when I check the element
the value is:
<ion-nav-buttons side="right" class="hide"></ion-nav-buttons>
How could I get the rest of the elements? Is because I'm using another directive? How can I address this?
When you have the element, then you can make queries to the inside elements with the usuan JQuery syntax:
$(element).find('.searchBar')[0]
or
$(element).find('.searchBox')[0]