ngModel双向绑定的一些问题

来源：互联网发布：视频观看软件编辑：程序博客网时间：2024/04/30 22:49

看段代码先：

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

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

0 0