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