Как получить доступ к элементу dom в директиве Angular

Я пытаюсь прикрепить событие keyup к директиве my Angular. Вот директива:

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

    link: function(scope, elem, attrs) {
      scope.count = 500;
    }
  };
});

и вот html из шаблона:

<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>

Я хочу получить доступ к chatbox в моей функции ссылок и прикрепить к нему событие keyup. Я знаю, что могу получить его с помощью jQuery, но это не может быть способ Angular. Каков правильный способ захвата этого элемента из dom?

Ответ 1

Вы можете легко сделать это с помощью метода Angular 'element' find():

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

Пример в реальном времени: http://jsfiddle.net/cherniv/S7XdK/

Ответ 2

Вы можете использовать element.find(yourSelector), как упоминалось ранее, но лучше использовать ngKeyUp, подобно тому, как вы будете использовать ngClick:

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