angularjs在js代码中改变了model的值，但是页面上没有变化

最新推荐文章于 2023-06-29 15:58:44 发布

前端散打王

最新推荐文章于 2023-06-29 15:58:44 发布

阅读量7.6k

点赞数 1

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/senmage/article/details/76068011

版权

angularjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.场景重现

在controller中我们先默认给定model的值，然后调用了一个外部函数改变这个model的值，页面上没有变化，还是显示默认值。

2.原因分析

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

3.案例重现

<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()函数。

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()，然后，监听器就会启动，视图就会更新了。

前端散打王

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
angularjs在js代码中改变了model的值，但是页面上没有变化

1.场景重现在controller中我们先默认给定model的值，然后调用了一个外部函数改变这个model的值，页面上没有变化，还是显示默认值。2.原因分析AngularJS只会关心在AngularJS的执行上下文中的发生的数据模型(model)的变化(比如，改变数据的代码在$apply()里面)。AngularJS内建的指令也会自动触发$digest循环所以任何数据模型(model)
复制链接

扫一扫

专栏目录