ngModel双向绑定的一些问题

原创 2015年11月18日 17:59:30

看段代码先:

<body>
<div ng-controller="mainCtrl">
    <input id="myText" type="text" ng-model="aa"/>
    <button ng-click="change();">click me</button>
    {{aa}}
</div>

<script>
        angular.module('myApp', [])
            .controller('mainCtrl', function ($scope) {
                $scope.change = function () {
                    alert('changing..');
                    document.getElementById('myText').value = 'changed!';

                    function did(){
                        $scope.aa=document.getElementById('myText').value;
                    };

                }
            })
</script>
</body>

非常简单的一个例子,为了证明并不是text控件的value值改变,ngModel就会改变。。点击效果如下:
这里写图片描述
value改变了,然而后面并没有出现相应的值
原因就是改变value不等于改变model值,需要重新绑定:

$scope.change = function () {
                    alert('changing..');
                    document.getElementById('myText').value = 'changed!';

                    function did(){
                        $scope.aa=document.getElementById('myText').value;
                    };
                    //监听value值的改变,改变ngModel的值
                    // $scope.$watch('document.getElementById(\'myText\').value',did);
                }

加入这个代码,监听value值的改变,然后通知scope做出改变。。
如果是手动输入不会出现上面的问题。但直接进行DOM操作,改变value值就会出现这个问题

原理的话,个人理解就是绑定相关的东西了。。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

读书笔记_Rootkit技术_深入补丁

之前介绍的都是在函数的入口处进行代码补丁,因为在内存中很容易找到函数,所以这个方法很容易实现。但anti-rootkit也同样容易检测到这种补丁,因为它可以只检查函数起始的20个字节的完整性就能够发现...

angular2中ngModel绑定问题

ts拿到的数据结构是一个json,json中的结构是类似于数组套数组的数据结构,在页面上显示的时候是一个input框,我需要做的是将类似于[1,2,3,4]这种结构的数据循环拿到其中的1,2,3,4,...

LV luxury package to return your back is not Gucci

LV handbag covered with the classic LV logo, Gucci bracelet printed with large "G", these 50 meters ...

Angular输入框内按下回车会触发其它button的点击事件的解决方法

偶然间遇到的一个八阿哥。解决方法:为button元素添加type="button"参考链接:http://stackoverflow.com/questions/20945834/why-hittin...

2010年10月全球web服务器调查

根据netcraft的调查October 2010 Web Server Survey,2010年10月,对全球232,839,963个网站的web服务器进行了统计。 如下图,Apache的比例有较大...

angular input回车事件

{{x}} var app = angular.module('myApp', []); app.controller('myctrl', function ($scop...

Discuz!X3.1笔记之一:A1型Discuz!主机和域名绑定的一些问题

笔者打算建自己的一个Discuz!论坛耍

解决Flex4双向绑定因数据类型不同而出现编译错误问题

以下内容转载自 http://www.iyoya.com/2011/06/24/two-way-data-binding-problem.html 正文: 在flex4以前如果要实现双向数据绑定就必须...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)