這篇文章主要為大家展示了“AngularJs中雙向綁定機(jī)制的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“AngularJs中雙向綁定機(jī)制的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營(yíng)銷人員及形象策劃。承接：做網(wǎng)站、成都做網(wǎng)站、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺(tái)等全方位的服務(wù)。

什么是雙向綁定

首先我們要理解數(shù)據(jù)綁定。我們看到的網(wǎng)站頁面中，是由數(shù)據(jù)和設(shè)計(jì)兩部分組合而成。將設(shè)計(jì)轉(zhuǎn)換成瀏覽器能理解的語言，便是html和css主要做的工作。而將數(shù)據(jù)顯示在頁面上，并且有一定的交互效果（比如點(diǎn)擊等用戶操作及對(duì)應(yīng)的頁面反應(yīng)）則是js主要完成的工作。很多時(shí)候我們不可能每次更新數(shù)據(jù)便刷新頁面（get請(qǐng)求），而是通過向后端請(qǐng)求相關(guān)數(shù)據(jù)，并通過無刷新加載的方式進(jìn)行更新頁面（post請(qǐng)求）。那么數(shù)據(jù)進(jìn)行更新后，頁面上相應(yīng)的位置也能自動(dòng)做出對(duì)應(yīng)的修改，便是數(shù)據(jù)綁定。

在以前的開發(fā)模式中，這一步一般通過jq操作DOM結(jié)構(gòu)，從而進(jìn)行更新頁面。但這樣帶來的是大量的代碼和大量的操作。如果能在開始的時(shí)候，便已經(jīng)確定好從后端獲取的數(shù)據(jù)到頁面上需要進(jìn)行的操作，當(dāng)數(shù)據(jù)發(fā)生改變，頁面的相關(guān)內(nèi)容也自動(dòng)發(fā)生變化，這樣便能極大地方便前端工程師的開發(fā)。在新的框架中（angualr，react，vue等）,通過對(duì)數(shù)據(jù)的監(jiān)視，發(fā)現(xiàn)變化便根據(jù)已經(jīng)寫好的規(guī)則進(jìn)行修改頁面，便實(shí)現(xiàn)了數(shù)據(jù)綁定?？梢钥闯觯瑪?shù)據(jù)綁定是M(model，數(shù)據(jù)）通過VM（model-view，數(shù)據(jù)與頁面之間的變換規(guī)則）向V（view）的一個(gè)修改。

而雙向綁定則是增加了一條反向的路。在用戶操作頁面（比如在Input中輸入值）的時(shí)候，數(shù)據(jù)能及時(shí)發(fā)生變化，并且根據(jù)數(shù)據(jù)的變化，頁面的另一處也做出對(duì)應(yīng)的修改。有一個(gè)常見的例子就是淘寶中的購物車，在商品數(shù)量發(fā)生變化的時(shí)候，商品價(jià)格也能及時(shí)變化。這樣便實(shí)現(xiàn)了V——M——VM——V的一個(gè)雙向綁定。

AngularJs 為 scope 模型上設(shè)置了一個(gè) 監(jiān)聽隊(duì)列，用來監(jiān)聽數(shù)據(jù)變化并更新 view 。每次綁定一個(gè)東西到 view(html) 上時(shí) AngularJs 就會(huì)往 $watch 隊(duì)列里插入一條 $watch，用來檢測(cè)它監(jiān)視的 model 里是否有變化的東西。當(dāng)瀏覽器接收到可以被 angular context 處理的事件時(shí)，$digest 循環(huán)就會(huì)觸發(fā)。$digest 會(huì)遍歷所有的 $watch。從而更新DOM。

$watch

這有點(diǎn)類似于我們的觀察者模式，在當(dāng)前作用域$scope下，我們創(chuàng)建一個(gè)監(jiān)控器$watchers和一個(gè)監(jiān)聽器$watch，$watchers 負(fù)責(zé)管理所有的 $watch，當(dāng)我們每次綁定到UI上的時(shí)候就自動(dòng)創(chuàng)建一個(gè)$watch，并把它放到 $watchers。

controller.js

app.controller('MainCtrl', function($scope) {
 $scope.Hello = "Hello";
 $scope.world = "World";
});

index.html

{{Hello}}

這里，即便我們?cè)?scope上添加了兩個(gè)變量，但是只有一個(gè)綁定在了UI上，因此在這里只生成了一個(gè)$watch

$digest

當(dāng)瀏覽器接收到可以被angular context處理的事件時(shí)，$digest循環(huán)就會(huì)觸發(fā)。$digest將會(huì)遍歷我們的$watch，如果$watch沒有變化，這個(gè)循環(huán)檢測(cè)就將停止，如果有至少一個(gè)更新過，這個(gè)循環(huán)就會(huì)再次觸發(fā)，直到所有的$watch都沒有變化。這樣就能夠保證每個(gè)model都已經(jīng)不會(huì)再變化。這就是臟檢查(Dirty Checking)機(jī)制

controller.js

app.controller('MainCtrl', function() {
 $scope.name = "Foo";

 $scope.changeFoo = function() {
  $scope.name = "Bar";
 }
});

index.js

{{ name }}
Change the name

1. 當(dāng)我們按下按鈕

2. 瀏覽器接收到一個(gè)事件，進(jìn)入angular context。

3. $digest循環(huán)開始執(zhí)行，查詢每個(gè)$watch是否變化。

4. 由于監(jiān)視$scope.name的$watch報(bào)告了變化，它會(huì)強(qiáng)制再執(zhí)行一次$digest循環(huán)。

5. 新的$digest循環(huán)沒有檢測(cè)到變化。

6. 更新與$scope.name新值相應(yīng)部分的DOM。

$apply

$apply 我們可以直接理解為刷新UI。如果當(dāng)事件觸發(fā)時(shí)，你調(diào)用$apply，它會(huì)進(jìn)入angular context，如果沒有調(diào)用就不會(huì)進(jìn)入，之后的$digest檢測(cè)機(jī)制就不會(huì)觸發(fā)

app.directive('clickable', function() {
 return {
  restrict: "E",
  scope: {
  foo: '='
  },
  template: '
{{foo}}
',
  link: function(scope, element, attrs) {
  element.bind('click', function() {
   scope.foo++;
   console.log(scope.foo);
  });
  }
 }
});

當(dāng)我們調(diào)用clickable指令的時(shí)候，我們可以看到foo的值增加了，但是界面上顯示的內(nèi)容并沒有改變。$digest臟檢測(cè)機(jī)制沒有觸發(fā)，檢測(cè)foo的$watch就沒有執(zhí)行。

$apply()方法的兩種形式

1) 無參

$scope.$apply();

element.bind('click', function() {
 scope.foo++;
 //if error
 scope.$apply();
});

當(dāng)我們使用這種形式的時(shí)候，如果在scope.$apply之前程序發(fā)生異常，那scope.$apply沒有執(zhí)行，界面就不會(huì)更新

2) 有參

$scope.$apply(function(){
 ...
})

element.bind('click', function() {
 scope.$apply(function() {
  scope.foo++;
 });
})

如果用這種形式，即使后面的發(fā)生異常，數(shù)據(jù)還是會(huì)更新。

在 AngularJS 中使用 $watch

常用的使用方式：

$scope.name = 'Hello';
$scope.$watch('name', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
});

傳入到$watch()中的第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，該函數(shù)在name的值發(fā)生變化的時(shí)候會(huì)被調(diào)用。

如果要監(jiān)聽的是一個(gè)對(duì)象，那還需要第三個(gè)參數(shù)：

$scope.data.name = 'Hello';
$scope.$watch('data', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
}, true);

表示比較的是對(duì)象的值而不是引用，如果不加第三個(gè)參數(shù)true，在 data.name 變化時(shí)，不會(huì)觸發(fā)相應(yīng)操作，因?yàn)橐玫氖峭灰谩?/p>

總結(jié)

1) 只有在$scope變量綁定到頁面上，才會(huì)創(chuàng)建 $watch

2) $apply決定事件是否可以進(jìn)入angular context

3) $digest 循環(huán)檢查model時(shí)最少兩次，最多10次(多于10次拋出異常，防止無限檢查)

4) AngularJs自帶的指令已經(jīng)實(shí)現(xiàn)了$apply，所以不需要我們額外的編寫

5) 在自定義指令時(shí)，建議使用帶function參數(shù)的$apply

以上是“AngularJs中雙向綁定機(jī)制的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱：AngularJs中雙向綁定機(jī)制的示例分析-創(chuàng)新互聯(lián)
本文鏈接：http://weahome.cn/article/dpodis.html