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

這篇文章將為大家詳細講解有關如何使用AngularJS對動態增加的DOM實現ng-keyup事件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創新互聯建站主要從事網站設計、網站建設、網頁設計、企業做網站、公司建網站等業務。立足成都服務漢中,十年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:18980820575

我們經常在網頁中看到這種形式的內容，如圖：

用鼠標點擊一下，就變成了一個input，如圖：

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

如果未輸入內容，并且鼠標離開后，則變回了原來的樣子；如果輸入了內容，即使鼠標離開，也保持內容不變，此時輸入回車，則添加內容，并清空輸入框。

我在想這個是這么實現的？想了一下有這么一個思路：普通情況下這個是一個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 = "";
  }
}

演示如下，普通情況下是這樣的：

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