AngularJS对动态增加的DOM实现ng-keyup事件示例

我们经常在网页中看到这种形式的内容，如图：

用鼠标点击一下，就变成了一个input，如图：

如果未输入内容，并且鼠标离开后，则变回了原来的样子；如果输入了内容，即使鼠标离开，也保持内容不变，此时输入回车，则添加内容，并清空输入框。

我在想这个是这么实现的？想了一下有这么一个思路：普通情况下这个是一个p或p元素，点击之后变成一个input元素，鼠标离开则变回原元素。代码（含详细注释版）如下：

对应的html代码则很简单：

 <p>
 <p id="click-to-add">
 <span>+</span>
 <span>添加待办事项</span>
 </p>
 </p>

那么input怎么响应回车呢？html自带的onkeyup可以很容易做到，在此不演示，可以自行搜索。而在Angular中，可以给input增加ng-keyup来实现，这个本来也很简单，但在现在的这个问题中，input不是一开始就有的，而是新生成的，直接使用ng-keyup并不起作用，Angular只会监听在页面加载完时的ng方法，新增的则无效，要使新增的DOM也能响应Angular方法，需要对其使用$compile方法，在前文this.parentNode.replaceChild(input_type, non_input_type);这句代码之前增加以下两行：

接下来还要编写send方法，如下：

演示如下，普通情况下是这样的：

点击后变成输入框：

有内容时，失去焦点也不会变，无内容时则回到普通状态，按下回车时，则alert内容：

后来我又想了一下，只使用input就可以了，可以修改placeholder的颜色……

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue单页应用引用单独的样式文件的两种方式

angular4 共享服务在多个组件中数据通信的示例

基于js中的存储键值对以及注意事项介绍