如何使用AngularJS對動態增加的DOM實現ng-keyup事件

這篇文章將為大家詳細講解有關如何使用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的顏色……

關于“如何使用AngularJS對動態增加的DOM實現ng-keyup事件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。