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

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

你可能感兴趣的:(Web,AngularJS)