angularjs的數據更新問題
阿新 • • 發佈：2017-06-09
angualr 發生 ply script angularjs head logs lrj 問題
在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的數據更新問題