programing

Angular 지시문에서 돔 요소에 액세스하는 방법

telecom 2023. 10. 12. 21:47
반응형

Angular 지시문에서 돔 요소에 액세스하는 방법

저는 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내 링크 기능에 키업 이벤트를 첨부합니다.제가 jQuery로 받을 수 있다는 것은 알지만, 그것은 Angular way가 될 수 없습니다.그 요소를 돔에서 가져오는 적절한 방법은 무엇입니까?

'앵귤러'로 쉽게 할 수 있습니다.'find()방법:

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

라이브 예제: http://jsfiddle.net/cherniv/S7XdK/

앞에서 언급한 대로 element.find(선택기)를 사용할 수 있지만 ngClick을 사용하는 방법과 유사하게 ngKeyUp을 사용하는 것이 좋습니다.

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

언급URL : https://stackoverflow.com/questions/19429025/how-to-access-a-dom-element-in-a-angular-directive

반응형