angularJs中修改controller后的数据没有重新渲染页面

来源：互联网发布：java中的final关键字编辑：程序博客网时间：2024/06/05 07:08

场景重现

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

原因分析

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

案例重现

[html] view plain copy
<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()函数。

[html] view plain copy
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