標籤：on() min 代碼 lan 狀態 理解 type 理想 bootstra
在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的資料更新問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
