如何访问 Angular 指令中的 dom 元素答案

【问题标题】：How to access a dom element in a Angular directive如何访问 Angular 指令中的 dom 元素
【发布时间】：2013-10-26 01:53:55
【问题描述】：

我正在尝试将 keyup 事件附加到我的 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 中获取该元素的正确方法是什么？

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以使用前面提到的 element.find(yourSelector)，但最好使用 ngKeyUp，类似于使用 ngClick：

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

【讨论】：

【解决方案2】：

您可以使用 Angular'element'find() 方法轻松做到这一点：

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

现场示例：http://jsfiddle.net/cherniv/S7XdK/

【讨论】：

完美。如果我想按 id 或 class 查找呢？
如果你想这样做，你需要使用完整的 jquery，并包装你的 $(element)。
不，id 是angular.element(document.getElementById('some'));
你可以做angular.element(document.querySelector('.yourclass'))
当 Angular 已经有 ng-keyup 时，为什么还要使用绑定？您是否知道当函数未使用 scope.$apply 包装时，它可能会导致片状行为，然后它正是 ng-keyup 实现？