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>