How to access a dom element in a Angular directive

Question

I am trying to attach a keyup event to a directive in my Angular project. Here is the directive:

angular.module('clinicalApp').directive('chatContainer', function() {   return {     scope: {       encounter: '=',       count: '='     }     templateUrl: 'views/chat.container.html',      link: function(scope, elem, attrs) {       scope.count = 500;     }   }; }); 

And here is the html from the template:

<div class="span4 chat-container">   <div class="chat-body">     <form accept-charset="UTF-8" action="#" method="POST">       <div class="text-area-container">         <textarea id="chatBox" class="chat-box" rows="2"></textarea>       </div>       <div class="button-container btn-group btn-group-chat">         <input  id="comment" class="btn btn-primary btn-small btn-comment disabled"  value="Comment" ng-click="addMessage()"/>       </div>     </form>     </div>   </div> </div> 

I want to access the chatbox in my link function and attach the keyup event to it. I know I can get it with jQuery, but that cannot be the Angular way. What is the proper way to grab that element from the dom?

Answer 1

You can easily do it with Angular' element' find() method:

 var chatbox = elem.find("textarea");  // Finding  chatbox.bind("keyup",function(){      // Binding      console.log("KEYUP!")  }) 

Live example: http://jsfiddle.net/cherniv/S7XdK/

Answer 2

You can use element.find(yourSelector) as previously mentioned, but it is better to use ngKeyUp, similar to how you would use ngClick:

https://docs.angularjs.org/api/ng/directive/ngKeyup