angularjs在代码中改变了 model 的值，view 却没有更新

来源：互联网发布：日语网络流行语编辑：程序博客网时间：2024/05/12 17:11

理解 Angular 中的 digest()和apply()https://segmentfault.com/a/1190000004523893

今天在完成项目任务时，遇到一个问题数据初始绑定时没有问题，然后通过在百度地图 API提供的函数中修改了 model（ng-model 绑定在输入框上），在页面中不能实时更新，但是点击其他的输入框或者按钮时，就可以更新，查看了很多资料后，发现了上面的那篇文章，太感谢作者了。

引用文章中的一段什么时候需要人为的调用$apply()呢如果AngularJS总是将我们的代码放在$apply()中并且执行$digest循环，那么，什么时候需要我们人为的调用$apply呢？事实上，AngularJS已经很明确的告诉我们了。AngularJS只会关心在AngularJS的执行上下文中的发生的数据模型(model)的变化(比如，改变数据的代码在$apply()里面)。AngularJS内建的指令也会自动触发$digest循环所以任何数据模型(model)的改变都会反映到视图中。但是，如果我们更改一个不在AngularJS执行上下文中的数据模型(model)，就需要人为的调用$apply()来提醒AngularJS数据发生变化了。就像是要告诉AngularJS，我们改变了一些数据，他应该启用监听器以便于让我们所做的改变能够反映出来。例如，当使用Javascript的setTimeout()函数来更新一个数据模型的时候，AngularJS就没办法知道你改变了数据模型。这种情况下，调用$apply()来触发$digest循环就是你的责任了。类似的，如果你写了一个指令，这个指令是设置了一个DOM事件监听器，更改数据模型的代码在事件处理函数里，那么，也需要调用$apply()来保证更改能够反映出来。

从上面这一段我知道了，我的数据模型变化不在 Angularjs 的执行上下文中，使用导致 angularjs 不知道数据发送变化也就没有做出反映，所以我手动人为的调用了$apply 解决了问题。

上文中的例子

让我们来看个例子。假设有一个页面，我们想在页面加载完之后两秒显示一个信息。我们可能这样写：<body ng-app="myApp">    <div ng-controller="MessageController">        Delayed Message: {{message}}    </div>  </body>/* 没有$apply()会发生什么 */angular.module('myApp', []).controller('MessageController', function ( $scope ) {    $scope.getMessage = function () {        setTimeout(function () {            $scope.message = 'Fetched after 3 seconds';            console.log('message:'+$scope.message);        }, 2000);    };    $scope.getMessage();});通过运行这个例子，我们会发现，在两秒之后，函数开始执行，并且更新数据模型。但是，视图却没有更新。原因我们也应该猜到了，我们忘了调用$apply()。因此，我们需要像下面这样来写我们的getMessage()函数。全选复制放进笔记/* 使用了$apply()会发生什么 */angular.module('myApp', []).controller('MessageController', function ( $scope ) {    $scope.getMessage = function () {        setTimeout(function () {            $scope.$apply(function () {                //wrapped this within $apply                $scope.message = 'Fetched after 3 seconds';                console.log('message:' + $scope.message);            });        }, 2000);    };    $scope.getMessage();});运行更新后的例子，两秒之后，我们就能够看到视图更新了。我们所做的唯一的改变就是将代码放进了$scope.$apply()中。这样，就能自动的去调用$rootScope.$digest()，然后，监听器就会启动，视图就会更新了。注意

再次感谢文章作者

0 0