首页 > Web开发 > 详细

angularjs的数据更新问题

时间:2017-06-09 13:58:39      阅读:302      评论:0      收藏:0      [点我收藏+]

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

至于什么时候使用此方法呢?我先给出一个例子:

<!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()就可以登场了

代码如下:

<!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秒就会变为‘我是李四’,这正是我们想要的效果,理想状态。

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

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

<!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的事件轮询有关了,这个地方就留给好奇的大兄弟去深究了....

angularjs的数据更新问题

原文:http://www.cnblogs.com/tqt--0812/p/6971600.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!