ngModel双向绑定的一些问题

最新推荐文章于 2024-10-27 16:02:26 发布

原创最新推荐文章于 2024-10-27 16:02:26 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #web

AngularJS 专栏收录该内容

20 篇文章

订阅专栏

这篇博客探讨了在AngularJS中，ngModel双向绑定遇到的问题。当直接通过DOM操作改变text控件的value值时，ngModel并不会自动更新。解决办法是监听value值的改变并通知scope。手动输入则不会触发此问题，原理涉及AngularJS的绑定机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看段代码先：

<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);
                }