{{person.name}} - {{person.age}}

對于上述 ng-repeat? 若有 10 個 people 會生成 10 * 2 +1 個 $watch

*** $watch 參數(shù)詳解 ***

使用 $watch 函數(shù)可以進行 自定義的 操作監(jiān)聽捉兴，更改 視圖

$scope.$watch('name', function(newValue, oldValue) {

if (newValue === oldValue) { return; } // AKA first run

$scope.updated++;

});

$watch 的 第二個參數(shù)是一個 函數(shù)蝎困，用于 監(jiān)聽 前面的變量是否更改。

$scope.$watch('user', function(newValue, oldValue) {

if (newValue === oldValue) { return; }

$scope.updated++;

}, true);

$watch 的 第三個參數(shù)是 boolear 類型的值倍啥，

** 作用：**

** newValue 和 oldValue 默認是比較 新舊值的引用禾乘，若 user 是一個對象，則無法判斷對象內(nèi)部值的改變,需要使用第三個參數(shù)來進行判斷對象內(nèi)部深層次的值是否改變虽缕。**

$digest

$digest 循環(huán)過程 會 包含兩個小循環(huán)始藕，$evalAsync 和 $watch 隊列循環(huán)。

$digest 會涉及到臟檢查機制氮趋，反復(fù)詢問 $watch 隊列是否有數(shù)據(jù)改變

{{ name }}

Change the name

// 這里有 一個 $watch（ name 會生成 $watch 伍派， 而 ng-click 不會生成 $watch, 因為函數(shù) 是不會變的。

我們按下按鈕

瀏覽器接收到一個事件剩胁，進入angular context（后面會解釋為什么）诉植。

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

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

新的$digest循環(huán)沒有檢測到變化索昂。

瀏覽器拿回控制權(quán)，更新與$scope.name新值相應(yīng)部分的DOM

$apply 用于進入 angular 的 上下文環(huán)境扩借， 只是一個angular 提供的一個 api 沒有 循環(huán)等

$apply 會自動觸發(fā) $digest 循環(huán)

angular 自己的事件動作會自動觸發(fā) $apply

非 angular 環(huán)境需要手動觸發(fā) $apply

有時自己添加了額外的 操作或動作椒惨，需要手動 $apply() 執(zhí)行 $digest 循環(huán)( 典型：訪問服務(wù)器以后的回調(diào)操作 )

element.bind('click', function() {

scope.foo++;

scope.bar++;

scope.$apply();? ? ? // 手動觸發(fā)，進行一次 $digest 循環(huán)

});

// 第二種

element.bind('click', function() {? ? //

scope.$apply(function() {? ? ? 使用 $apply 函數(shù)進行 $digest 循環(huán)

scope.foo++;

scope.bar++;

});

})

angular 執(zhí)行時期 再解釋 （ 主要是 $apply $digest $watch 這三個方法的流程 ）

concepts-runtime.png

1. 頁面觸發(fā) DOM 事件潮罪，回調(diào)等康谆。

2. 應(yīng)用程序自動調(diào)用 $apply()? 方法進入 angular 上下文，觸發(fā) $digest 循環(huán)開始嫉到，

3. $digest 循環(huán) 遍歷 $watch 列表集合沃暗，臟檢查 數(shù)據(jù)模型的改變，循環(huán)過程

4. 檢查完畢何恶，更新 數(shù)據(jù)模型孽锥，( 更改變量或者其他動作操作 )

5. 作用域根據(jù)數(shù)據(jù)模型渲染 UI視圖。

6. 繼續(xù)監(jiān)聽。

7. angular 的 通訊

angular 模塊之間的通訊方式

1. 作用域傳遞（ 父子模塊通訊 ）$parent $child

2. 作用域數(shù)據(jù)傳遞 + $watch （ 類似于指令的數(shù)據(jù)傳遞的 = ）

3. 事件廣播 ( $emit $on $boardcast )

使用 $rootscope

將 $rootscope 作為依賴注入項惜辑，在子組件中使用 $rootscope

使用場景： 對于一處改變唬涧，需要多處通知更改的變量，頻繁的調(diào)用可以使用 $rootscope(對于登錄使用的用戶名稱盛撑，在一個地方使用碎节，需要多處顯示，并且更改后需要多處更改)

myAppModule.controller('myCtrl', function($scope, $rootScope) {

$scope.change = function() {

$scope.test = new Date();

};

$scope.getOrig = function() {

return $rootScope.test;

};

})

作用域繼承 的 模塊通訊

作用域繼承是在子模塊中可以直接使用父模塊方法/變量的 通訊方式

** 只適合數(shù)據(jù)從 父模塊傳遞到子模塊 **

** 在指令的數(shù)據(jù)傳遞中 通常使用這種模式進行通訊 **

Do

特點：

只適合數(shù)據(jù)從 父模塊傳遞到子模塊

子模塊的同名方法會覆蓋父模塊的 方法/變量

不能進行同級組件之間的數(shù)據(jù)傳遞抵卫。除非顯示更改 $rootscope

層級較多時 維護比較麻煩

作用域通訊 + $watch

作用域的數(shù)據(jù)只能從 父作用域傳遞到子作用域狮荔，** 使用 $watch() 可以監(jiān)控子作用于數(shù)據(jù)的改變，類似于 指令數(shù)據(jù)傳遞的 = ( 等于號 ) **

.controller("Parent", function($scope){

$scope.VM = {a: "a", b: "b"};

$scope.$watch("VM.a", function(newVal, oldVal){

// code

});

})

// 需要用到 $parent 等

.controller('Child', function($scope){

$scope.$parent.$watch('$scope.VM.a', function() { ..... })

})

消息機制

scope 提供了冒泡和隧道機制介粘，$on, $emit, $boardcast

$boardcast 將事件廣播給所有的子組件殖氏，

$on 用于注冊事件函數(shù)，

$emit 用于事件向上冒泡傳遞

優(yōu)缺點: 相比于 $emit碗短，$boardcast 需要向所有的子組件廣播組件的改變受葛，會消耗更多的資源

** 所以 在應(yīng)用的通訊數(shù)據(jù)達到很大體量 **

$rootscope $scope + watch 都可以成為設(shè)計的基本手法

使用 Service 進行通訊

因為 angular 中所有的 Service 都是單例的，使用 Service 能夠比 時間隧道機制在邏輯上更加清晰偎谁。

簡單抽取基本的數(shù)據(jù)

var myApp = angular.module('myApp', []);

myApp.factory('Data', function() {

return { message: "I'm data from a service" }

})

function FirstCtrl($scope, Data) {

$scope.data = Data;

}

function SecondCtrl($scope, Data) {

$scope.data = Data;

}

進階版一： 使用 $watch 來監(jiān)測數(shù)據(jù)變化

angular.module('Store', [])

//? 提供基本數(shù)據(jù)模型初始數(shù)據(jù)的 Service

.factory('Products', function() {

return {

query: function() {

return [{ name: 'Lightsaber', price: 1299.99}, { name: 'Jet Pack', price: 9999.99}, { name: 'Speeder', price: 24999.99}];

}

};

})

//? 提供數(shù)據(jù)模型的 Service

.factory('Order', function() {

var add = function(item, qty) {

item.qty = qty;

this.items.push(item);

};

var remove = function(item) {

if (this.items.indexOf(item) > -1) {

this.items.splice(this.items.indexOf(item), 1);

}

};

var total = function() {

return this.items.reduce(function(memo, item) {

return memo + (item.qty * item.price);

}, 0);

};

return {? ? ? ? // 返回完整的數(shù)據(jù)模型

items: [],

addToOrder: add,

removeFromOrder: remove,

totalPrice: total

};

}).controller('OrderCtrl', function(Products, Order) {

this.products = Products.query();

this.items = Order.items;

this.addToOrder = function(item) {

Order.addToOrder(item, 1);

};

this.removeFromOrder = function(item) {

Order.removeFromOrder(item);

};

this.totalPrice = function() {

return Order.total();

};

}).controller('CartCtrl', function($scope, Order) {

$scope.items = Order.items;

$scope.$watchCollection('items', function() {

$scope.totalPrice = Order.totalPrice().toFixed(2);

}.bind(this));

});

//? 整個頁面只有這里需要根據(jù)數(shù)據(jù)模型的變化而 改變視圖 UI

{{product.name}} - {{product.price}}

Add

Remove

angularjs的$watch总滩、$watchGroup、$watchCollection 使用方式 區(qū)別

angular 幾種數(shù)據(jù)通訊機制

var myModule = angular.module('myModule', []);

myModule.factory('mySharedService', function($rootScope) {

var sharedService = {};

sharedService.message = '';

sharedService.prepForBroadcast = function(msg) {

this.message = msg;

this.broadcastItem();? ? ? // 執(zhí)行 廣播

};

sharedService.broadcastItem = function() {

$rootScope.$broadcast('handleBroadcast');

};

return sharedService;

});

function ControllerZero($scope, sharedService) {

$scope.handleClick = function(msg) {

sharedService.prepForBroadcast(msg);? ? ? ? // 調(diào)用包含廣播的函數(shù)

};

$scope.$on('handleBroadcast', function() {

$scope.message = sharedService.message;

});

}

function ControllerOne($scope, sharedService) {

$scope.$on('handleBroadcast', function() {

$scope.message = 'ONE: ' + sharedService.message;

});

}

function ControllerTwo($scope, sharedService) {

$scope.$on('handleBroadcast', function() {

$scope.message = 'TWO: ' + sharedService.message;

});

}

ControllerZero.$inject = ['$scope', 'mySharedService'];

ControllerOne.$inject = ['$scope', 'mySharedService'];

ControllerTwo.$inject = ['$scope', 'mySharedService'];

作者：南航

鏈接：http://www.reibang.com/p/959cb6bb7036

來源：簡書

著作權(quán)歸作者所有巡雨。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)闰渔，非商業(yè)轉(zhuǎn)載請注明出處。