angularjs的數據更新問題


在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的事件輪詢有關了,這個地方就留給好奇的大兄弟去深究了....


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM