在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的事件轮询有关了,这个地方就留给好奇的大兄弟去深究了....
原文:http://www.cnblogs.com/tqt--0812/p/6971600.html