justforuse的博客

什么都懂一点,生活更多彩一些 http://justforuse.github.io/

ngModel双向绑定的一些问题

看段代码先:

<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值就会出现这个问题

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

阅读更多
版权声明:转载请附上原文链接,谢谢;侵删。 https://blog.csdn.net/u014291497/article/details/49910679
文章标签: angularjs web
个人分类: AngularJS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭