如何访问 Angular 指令中的 dom 元素 [英] How to access a dom element in a Angular directive

问题描述

我正在尝试将 keyup 事件附加到我的 Angular 项目中的指令.这是指令:

angular.module('clinicalApp').directive('chatContainer', function() {返回 {范围: {遇到: '=',计数:'='}templateUrl: 'views/chat.container.html',链接:功能(范围，元素，属性){范围.计数 = 500;}};});

这是模板中的html:

<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 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()"/>

</表单>

我想在我的链接函数中访问 chatbox 并将 keyup 事件附加到它.我知道我可以用 jQuery 来获得它，但这不是 Angular 的方式.从 dom 中获取该元素的正确方法是什么?

解决方案

您可以使用 Angular 轻松完成element' find() 方法:

 var chatbox = elem.find("textarea");//查找chatbox.bind("keyup",function(){//绑定console.log("KEYUP!")})

实例:http://jsfiddle.net/cherniv/S7XdK/

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?

解决方案

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/

这篇关于如何访问 Angular 指令中的 dom 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！