如何在Angular指令中访问DOM元素

Question

我正在尝试将一个键盘抬起事件添加到我的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中获取该元素？

- jhamm

Answer 1

你可以使用Angular的element的find()方法轻松实现它： element。

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

实时例子：http://jsfiddle.net/cherniv/S7XdK/

- Ivan Chernykh

---

完美。如果我想按ID或类查找怎么办？ - jhamm

如果你想这样做，你需要使用完整的jQuery，并包装你的$(element)。 - B Cotter

不，ID是 angular.element(document.getElementById('some'));。 - iConnor

你可以使用 angular.element(document.querySelector('.yourclass'))。 - Joe Minichino

@haimlit Angular并不总是有ng-keyup，它只在1.1.2版本中添加了该功能，而我的jsfiddle仅使用1.1.1版本。因此，现在您可以发布一个更新的关于ng-keyup的信息的答案，而不是对我的答案进行负面评价，好吗？ - Ivan Chernykh

Answer 2

您可以像之前提到的那样使用element.find(yourSelector)，但最好使用ngKeyUp，就像使用ngClick一样：

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

- haimlit