angularjs 中$apply，$digest，$watch詳解
如果你對(duì)angular的$apply，$digest，$watch似懂非懂，那我相信下面幾句話能讓你深刻理解！
此文針對(duì)已經(jīng)了解過(guò)$apply，$digest，$watch的同學(xué)。也就是說(shuō)你已經(jīng)在很多的博客論壇搜索過(guò)$apply，$digest，$watch，雖然有點(diǎn)蒙，但似懂非懂的感覺(jué)。
如果你從未進(jìn)行過(guò)了解，那本文對(duì)你將沒(méi)有一點(diǎn)幫助！
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<title>angular時(shí)鐘輔助理解$apply，$digest，$watch</title>
<link rel="stylesheet" href="../bootstrap.min.css">
</head>
<body ng-controller="myController">
<div ng-bind="clock.now"></div>
<script src="../angular.min.js"></script>
<script>
angular.module(‘a(chǎn)pp‘, [])
.controller(‘myController‘, function($scope, $timeout, $interval) {
// 第一種
// $scope.clock = {};
// var clockFunction = function() {
// $scope.clock.now = new Date();
// $timeout(function() { // 使用$timeout 來(lái)代替setTimeout(),因?yàn)榍罢咭呀?jīng)調(diào)用了$apply()
// clockFunction();
// }, 1000)
// // setTimeout(function() {
// // $scope.$apply(clockFunction);
// // }, 1000)
// }
// clockFunction();
// 第二種
$scope.clock = {
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date();
};
setInterval(function() { // 如果不使用$interval 則需要手動(dòng)調(diào)用$apply(),以使已經(jīng)改變的$scope及時(shí)的更新到view
$scope.$apply(updateClock);
// 這里可以看出 $scope已經(jīng)改變但并未及時(shí)更新到view
// updateClock();
// console.log($scope.clock.now);
}, 1000);
updateClock();
})
</script>
</body>
</html>
準(zhǔn)備開始！
$apply （通知）
$digest（循環(huán)）
$watch（監(jiān)聽）
這里可能與英語(yǔ)的翻譯有所差別，但是這不是重點(diǎn)，重點(diǎn)是讓你能夠理解
angular在監(jiān)聽數(shù)據(jù)變化并執(zhí)行雙向綁定時(shí)一定會(huì)做的事情：
通知（$apply）angular，告訴他有一個(gè)函數(shù)test（$apply(test)），需要他幫忙做下臟檢查（$digest臟檢查），在做臟檢查的同時(shí)監(jiān)聽數(shù)據(jù)變化（$watch）并反映到view中
當(dāng)不在angular上下文中的時(shí)候，則需要你手動(dòng)$apply。如果不做$apply雖然angular能夠監(jiān)聽數(shù)據(jù)變化，但他并不會(huì)將數(shù)據(jù)及時(shí)更新到view，因?yàn)樗⒉恢滥愕臄?shù)據(jù)在什么時(shí)候是最新的
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
- angularJS中$apply()方法詳解
- 淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
- AngularJS中的$watch()，$digest()和$apply()區(qū)分
- 全面解析Angular中$Apply()及$Digest()的區(qū)別
- AngularJS中$apply方法和$watch方法用法總結(jié)
- AngularJS報(bào)錯(cuò)$apply already in progress的解決方法分析
- Angular項(xiàng)目中$scope.$apply()方法的使用詳解
- Angular.js中$apply()和$digest()的深入理解
- AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest的應(yīng)用
- Angularjs中的$apply及優(yōu)化使用詳解
相關(guān)文章
這篇文章主要介紹了AngularJS路由用法,簡(jiǎn)單分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以參考下2017-05-05
詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由
本篇文章主要介紹了詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要介紹了在 Angular中 使用 Lodash 的方法,需要的朋友可以參考下2018-02-02
簡(jiǎn)單談?wù)勱P(guān)于Angular Cli打包的事
使用過(guò)angular2人都應(yīng)該知道，angular2提供的Angular CLI來(lái)快速搭建，快速生成serives、component、derective、modulet各種模板...下面這篇文章主要給大家介紹了關(guān)于Angular Cli打包的一些事，需要的朋友可以參考下。2017-09-09
通過(guò)實(shí)例代碼給大家詳細(xì)講述了angular動(dòng)態(tài)表單的制作方法，對(duì)此有需要的朋友參考下。2018-02-02
angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法
這篇文章主要介紹了angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
本文通過(guò)實(shí)例代碼給大家介紹了Angular中的$watch方法，包括$watch簡(jiǎn)介及基本用法，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了在angular 6中使用 less 的實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Angularjs中的ui-bootstrap的使用教程,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
簡(jiǎn)述AngularJS相關(guān)的一些編程思想
這篇文章主要介紹了AngularJS相關(guān)的一些編程思想,AngularJS是一款熱門的JavaScript庫(kù),推薦!需要的朋友可以參考下2015-06-06