Comment accéder à un élément dom dans une directive angulaire

J'essaie d'attacher un événement keyup à une directive dans mon projet angulaire. Voici la directive:

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

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

Et voici le html du modèle: 

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

Je veux accéder au chatbox dans ma fonction de lien et y attacher l'événement keyup. Je sais que je peux l'obtenir avec jQuery, mais cela ne peut pas être la manière angulaire. Quelle est la bonne façon de saisir cet élément du dom?

25
demandé sur Jarrod 2013-10-17 18:08:56

2 réponses

, Vous pouvez le faire facilement avec Angulaire' element' find() méthode:

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

Exemple En Direct: http://jsfiddle.net/cherniv/S7XdK/

29
répondu Cherniv 2013-10-17 14:20:45

Vous pouvez utiliser l'élément.find (yourSelector) comme mentionné précédemment, mais il est préférable d'utiliser ngKeyUp, similaire à la façon dont vous utiliseriez ngClick:

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

3
répondu haimlit 2014-05-09 14:09:51