AngularJS對(duì)動(dòng)態(tài)增加的DOM實(shí)現(xiàn)ng-keyup事件示例

2019-11-19 14:11:15

字體：大中小

供稿：網(wǎng)友

我們經(jīng)常在網(wǎng)頁(yè)中看到這種形式的內(nèi)容，如圖：

用鼠標(biāo)點(diǎn)擊一下，就變成了一個(gè)input，如圖：

如果未輸入內(nèi)容，并且鼠標(biāo)離開(kāi)后，則變回了原來(lái)的樣子；如果輸入了內(nèi)容，即使鼠標(biāo)離開(kāi)，也保持內(nèi)容不變，此時(shí)輸入回車(chē)，則添加內(nèi)容，并清空輸入框。

我在想這個(gè)是這么實(shí)現(xiàn)的？想了一下有這么一個(gè)思路：普通情況下這個(gè)是一個(gè)div或p元素，點(diǎn)擊之后變成一個(gè)input元素，鼠標(biāo)離開(kāi)則變回原元素。代碼（含詳細(xì)注釋版）如下：

window.onload = function () {  // 頁(yè)面加載完給id為click-to-add的元素增加onclick方法  document.getElementById("click-to-add").onclick = function () {    // this在這個(gè)函數(shù)中就是id為click-to-add的元素，將其保存到變量non_input_type    var non_input_type = this;    // 新建一個(gè)input，保存到變量input_type    var input_type = document.createElement("input");    // 給input添加class和placeholder，這里我發(fā)現(xiàn)class對(duì)bootstrap有效    input_type.setAttribute("placeholder", "添加待辦事項(xiàng)");    input_type.className = "form-control";    // 獲取父元素，然后父元素替換Child    this.parentNode.replaceChild(input_type, non_input_type);    // 設(shè)置焦點(diǎn)到input框中    input_type.focus();    // 當(dāng)input失去焦點(diǎn)，即鼠標(biāo)點(diǎn)到了別的地方    input_type.onblur = function () {    // 且input中沒(méi)有輸入內(nèi)容時(shí)    if (input_type.value.length === 0){      // 再替換回原來(lái)的對(duì)象      input_type.parentNode.replaceChild(non_input_type, input_type);      }    }  }};

對(duì)應(yīng)的html代碼則很簡(jiǎn)單：

  <div>    <p id="click-to-add">      <span>+</span>      <span>添加待辦事項(xiàng)</span>    </p>  </div>

那么input怎么響應(yīng)回車(chē)呢？html自帶的onkeyup可以很容易做到，在此不演示，可以自行搜索。而在Angular中，可以給input增加ng-keyup來(lái)實(shí)現(xiàn)，這個(gè)本來(lái)也很簡(jiǎn)單，但在現(xiàn)在的這個(gè)問(wèn)題中，input不是一開(kāi)始就有的，而是新生成的，直接使用ng-keyup并不起作用，Angular只會(huì)監(jiān)聽(tīng)在頁(yè)面加載完時(shí)的ng方法，新增的則無(wú)效，要使新增的DOM也能響應(yīng)Angular方法，需要對(duì)其使用$compile方法，在前文this.parentNode.replaceChild(input_type, non_input_type);這句代碼之前增加以下兩行：

// 增加ng-keyup事件，對(duì)應(yīng)執(zhí)行send($event)這個(gè)函數(shù)input_type.setAttribute("ng-keyup", "send($event)");// 對(duì)input_type使用$compile方法$compile(input_type)($scope);

接下來(lái)還要編寫(xiě)send方法，如下：

$scope.send = function (e) {  // 不同瀏覽器獲取按鍵代碼不一樣，有的是e.keyCode，有的是e.which  var keycode = window.event?e.keyCode:e.which;  // 回車(chē)對(duì)應(yīng)13  if (keycode === 13){    // e.targe就是對(duì)應(yīng)的DOM，這里獲取到value就按自己的需求去處理了    alert("Add ToDo: " + e.target.value);    e.target.value = "";  }}

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