AngularJS 는 동적 으로 증가 하 는 DOM 에 대해 ng-keyup 이벤트 예제 를 실현 합 니 다.

우 리 는 자주 홈 페이지 에서 이런 형식의 내용 을 본다.그림 과 같다.

마우스 로 클릭 하면 input 이 됩 니 다.그림 참조:

내용 을 입력 하지 않 고 마우스 가 떠 나 면 원래 의 모습 으로 돌아간다.내용 을 입력 하면 마우스 가 떠 나 도 내용 이 변 하지 않 고,이때 리 턴 을 입력 하면 내용 을 추가 하고 입력 상 자 를 비 웁 니 다.
이게 이렇게 이 루어 진 거 라 고 생각 했 는데?생각해 보 니 이런 생각 이 들 었 습 니 다.보통 상황 에서 이것 은 div 또는 p 요소 입 니 다.클릭 하면 input 요소 가 되 고 마우스 가 떠 나 면 원래 요소 로 돌아 갑 니 다.코드(상세 설명 판 포함)는 다음 과 같 습 니 다.

window.onload = function () {
  //       id click-to-add     onclick  
  document.getElementById("click-to-add").onclick = function () {
    // this        id click-to-add   ，       non_input_type
    var non_input_type = this;
    //     input，     input_type
    var input_type = document.createElement("input");
    //  input  class placeholder，     class bootstrap  
    input_type.setAttribute("placeholder", "      ");
    input_type.className = "form-control";
    //      ，       Child
    this.parentNode.replaceChild(input_type, non_input_type);
    //      input  
    input_type.focus();
    //  input    ，          
    input_type.onblur = function () {
    //  input        
    if (input_type.value.length === 0){
      //          
      input_type.parentNode.replaceChild(non_input_type, input_type);
      }
    }
  }
};

대응 하 는 html 코드 는 간단 합 니 다.

  <div>
    <p id="click-to-add">
      <span>+</span>
      <span>      </span>
    </p>
  </div>

그럼 input 은 어떻게 리 턴 에 응 합 니까?html 자체 테이프 의 onkeyup 은 쉽게 할 수 있 으 며,여기 서 시범 을 보이 지 않 고 자체 검색 이 가능 하 다.한편,Angular 에서 input 에 ng-keyup 을 증가 시 켜 실현 할 수 있다.이것 은 원래 간단 하지만 현재 의 이 문제 에서 input 은 처음부터 있 었 던 것 이 아니 라 새로 생 성 된 것 이다.ng-keyup 을 직접 사용 하 는 것 은 소 용이 없다.Angular 은 페이지 에 불 러 올 때 ng 방법 을 감청 하고 새로 추 가 된 것 은 무효 이다.새로 추 가 된 DOM 도 Angular 방법 에 응답 하려 면 $compile 방법 을 사용 하고 앞의 this.parentNode.replaceChild(input_type, non_input_type); 코드 전에 다음 과 같은 두 줄 을 추가 해 야 합 니 다.

//   ng-keyup  ，    send($event)    
input_type.setAttribute("ng-keyup", "send($event)");
//  input_type  $compile  
$compile(input_type)($scope);

다음은 send 방법 을 작성 해 야 합 니 다.다음 과 같 습 니 다.

$scope.send = function (e) {
  //               ，   e.keyCode，   e.which
  var keycode = window.event?e.keyCode:e.which;
  //     13
  if (keycode === 13){
    // e.targe     DOM，     value           
    alert("Add ToDo: " + e.target.value);
    e.target.value = "";
  }
}

다음 과 같이 보 여 줍 니 다.일반적인 상황 에 서 는 다음 과 같 습 니 다.

클릭 후 입력 상자 로 변환:

내용 이 있 을 때 초점 을 잃 어도 변 하지 않 고 내용 이 없 을 때 는 일반 상태 로 돌아 가 리 턴 을 누 를 때 는 alert 내용 이다.

나중에 다시 생각해 봤 는데 input 만 사용 하면 돼 요.placeholder 색상 을 수정 할 수 있어 요.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.