莫名失效的双向绑定
来自于开发中偶然遇到的一个问题，看下面的例子：
function TodoCtrl($scope) {
$scope.change = function() {
$scope.value = ""
}
}
可以在 JSFiddle 上直接打开 demo ，这段代码的本意是在框里输入任意一个数字，然后按 TEST 按钮，数字都会被清空。
在大多情况下，这段代码都是生效的，但是当我们输入 e 时，点击按钮，却等不到任何反应。
HTML 的 number input
标题里我写的是 AngularJS 的 number input，而事实上，number input 是 HTML 特性。只允许输入合法的数字，之所以能够输入 e 是因为允许输入指数，上面的功能我们同样可以用原生实现：
<script>
function test(){
var input = document.getElementById("number-input")
input.value = ""
}
</script>
然后我们会发现工作的非常好，那么问题出在哪呢。我们可以试着在这里模拟一下 AngularJS 的脏检查，即比对 View 和 Model 的值是否不同，也就是说，代码变成了这样：
<script>
function test(){
var input = document.getElementById("number-input")
if (input.value !== ""){
input.value = ""
}
}
</script>
然后我们就会发现，成功的复现了上面的 Demo 遇到的问题。这里问题的原因应该很明显了，我们也可以输出 input.value 的值来验证我们的想法，会发现当输入非法时（例如单独的 e )，获取到的 input.value 就是空，所以 AnguarJS 认为 View 和 Model 没有任何不同，不需要更新。
验证我们的想法
要验证是否是这个原因也非常简单，只要我们先把 View 的值变成合法值，再将 Modle 置为空，看看这种情况下 AngularJS 能否正确的清空输入框：
function Ctrl($scope) {
$scope.change = function() {
$scope.value = 0
$scope.$apply();
$scope.value = null
}
}
正如我们预料的，这次成功的清除了非法输入
解决方案
最后我们采取的解决方案是当输入非法时直接使用 DOM 操作清空输入，虽然 DOM 操作不优雅，但是实际上这里 DOM 操作并不影响 View 和 Model 之间的关系，因为 AngularJS 本来就认为此时的 VIew 是空的。（我们可以通过 input.validity.valid 来判断输入的合法性。）
angularjs api文档|AngularJS number input 的双向绑定例子
http://m.bbyears.com/wangyezhizuo/110197.html
推荐访问:angularjs2 angularjs下载 angularjs自定义指令 angularjs和vue的区别