CODEWITHSUNDEEP
angularjs
Amitava
Amitava

Reputation: 5083

How to get hold of template html in directive

I'm trying to create a simple time picker directive. http://plnkr.co/edit/VYGqhPbHf1yqXLpemGEP

When user click on input field I want to display the content of my template html as a dropdown below the input (will take care of css later) so that user can select a time from the list. I'm not sure how to get hold of the template (something like angular.element(template).show())

Thanks!

Edit: I managed to come up with this: http://plnkr.co/edit/zAplNKVfohXLbIzwjhy4?p=preview Everything works except when I click any of the list, it does not set the correct model value.

Upvotes: 1

Views: 78

Answers (2)

Amitava
Amitava

Reputation: 5083

I managed to get it working. I had to create a new scope for the dropdown element. http://plnkr.co/edit/zAplNKVfohXLbIzwjhy4?p=preview

Upvotes: 0

TheHippo
TheHippo

Reputation: 63139

Try the following:

  • Embed the the HTML for the date picker list
  • Hide the list from the html
  • If the input gets focus change the visibility.

Pseudo code:

HTML:

<ul ng-show="listVisible">
    <li> .... </li>
</ul>

JavaScript

scope.listVisible = false;
element.$on('focus', function() {
    scope.listVisible = true;
});

Do something similar in reverse.

Upvotes: 1

Related Questions