Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
825 views
in Technique[技术] by (71.8m points)

angularjs - How to access a dom element in a Angular directive

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...