angularjs的数据更新问题

时间 2019-11-18

原文原文链接

在angularjs里面，检查绑定的数据到底有没有发生变化，是数据绑定的基础，只要知道数据改变了，angularjs才会去更新视图，而angularjs提供了一个用的方法$scope.$apply();css

至于何时使用此方法呢？我先给出一个例子：html

<!DOCTYPE html>
<html lang="zh-cn" ng-app="myWeb">
<head>
    <meta charset="utf-8">
    <title>视图更新</title>
    <link rel="stylesheet" href="./libs/bootstrap.min.css">
    <script src="./libs/angular.min.js"></script>
</head>
<body ng-controller="shou">

<div ng-bind="name"></div>
<script>
    var app = angular.module('myWeb', []);
    app.controller('shou', ['$scope', function($scope) {
        $scope.name = '我是张三';
        setTimeout(function(){
            $scope.name = '我是李四';
        }, 1000);
    }]);
</script>
</body>
</html>

试一下这段代码发现页面再出现‘我是张三’，后不会变为‘我是李四’, 这是不符合咱们想要的呀，因此这个时候$scope.$apply()就能够登场了angularjs

代码以下：bootstrap

<!DOCTYPE html>
<html lang="zh-cn" ng-app="myWeb">
<head>
    <meta charset="utf-8">
    <title>视图更新</title>
    <link rel="stylesheet" href="./libs/bootstrap.min.css">
    <script src="./libs/angular.min.js"></script>
</head>
<body ng-controller="shou">

<div ng-bind="name"></div>
<script>
    var app = angular.module('myWeb', []);
    app.controller('shou', ['$scope', function($scope) {
        $scope.name = '我是张三';
        setTimeout(function(){
            $scope.$apply(function(){ $scope.name = '我是李四'; });
        }, 1000);
    }]);
</script>
</body>
</html>

上面的代码的效果是在出现了‘我是张三’，后1秒就会变为‘我是李四’，这正是咱们想要的效果，理想状态。app

个人片面理解就是$scope.$apply()会通知angularjs数据改变了，快去更新视图。spa

同时还有一个方法也能够实现如上的效果：那就是$timeout, 代码以下：code

<!DOCTYPE html>
<html lang="zh-cn" ng-app="myWeb">
<head>
    <meta charset="utf-8">
    <title>视图更新</title>
    <link rel="stylesheet" href="./libs/bootstrap.min.css">
    <script src="./libs/angular.min.js"></script>
</head>
<body ng-controller="shou">

<div ng-bind="name"></div>
<script>
    var app = angular.module('myWeb', []);
    app.controller('shou', ['$scope', '$timeout', function($scope, $timeout) {
        $scope.name = '我是张三';
        $timeout(function(){ $scope.name = '我是李四';
        }, 1000);
    }]);
</script>
</body>
</html>

为何$timeout也能够呢？这个时候我就在想这可能和angualrjs视图渲染的方式和js的事件轮询有关了，这个地方就留给好奇的大兄弟去深究了....htm