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

对于上述 ng-repeat  若有 10 个 people 会生成 10 * 2 +1 个 $watch

*** $watch 参数详解 ***

使用 $watch 函数可以进行 自定义的 操作监听，更改 视图

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

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

$scope.updated++;

});

$watch 的 第二个参数是一个 函数，用于 监听 前面的变量是否更改。

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

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

$scope.updated++;

}, true);

$watch 的 第三个参数是 boolear 类型的值，

** 作用：**

** newValue 和 oldValue 默认是比较 新旧值的引用，若 user 是一个对象，则无法判断对象内部值的改变,需要使用第三个参数来进行判断对象内部深层次的值是否改变。**

$digest

$digest 循环过程 会 包含两个小循环，$evalAsync 和 $watch 队列循环。

$digest 会涉及到脏检查机制，反复询问 $watch 队列是否有数据改变

{{ name }}

Change the name

// 这里有 一个 $watch（ name 会生成 $watch ， 而 ng-click 不会生成 $watch, 因为函数 是不会变的。

我们按下按钮

浏览器接收到一个事件，进入angular context（后面会解释为什么）。

$digest循环开始执行，查询每个$watch是否变化。

由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。

新的$digest循环没有检测到变化。

浏览器拿回控制权，更新与$scope.name新值相应部分的DOM

$apply 用于进入 angular 的 上下文环境， 只是一个angular 提供的一个 api 没有 循环等

$apply 会自动触发 $digest 循环

angular 自己的事件动作会自动触发 $apply

非 angular 环境需要手动触发 $apply

有时自己添加了额外的 操作或动作，需要手动 $apply() 执行 $digest 循环( 典型：访问服务器以后的回调操作 )

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

scope.foo++;

scope.bar++;

scope.$apply();      // 手动触发，进行一次 $digest 循环

});

// 第二种

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

scope.$apply(function() {      使用 $apply 函数进行 $digest 循环

scope.foo++;

scope.bar++;

});

})

angular 执行时期 再解释 （ 主要是 $apply $digest $watch 这三个方法的流程 ）

concepts-runtime.png

1. 页面触发 DOM 事件，回调等。

2. 应用程序自动调用 $apply()  方法进入 angular 上下文，触发 $digest 循环开始，

3. $digest 循环 遍历 $watch 列表集合，脏检查 数据模型的改变，循环过程

4. 检查完毕，更新 数据模型，( 更改变量或者其他动作操作 )

5. 作用域根据数据模型渲染 UI视图。

6. 继续监听。

7. angular 的 通讯

angular 模块之间的通讯方式

1. 作用域传递（ 父子模块通讯 ）$parent $child

2. 作用域数据传递 + $watch （ 类似于指令的数据传递的 = ）

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

使用 $rootscope

将 $rootscope 作为依赖注入项，在子组件中使用 $rootscope

使用场景： 对于一处改变，需要多处通知更改的变量，频繁的调用可以使用 $rootscope(对于登录使用的用户名称，在一个地方使用，需要多处显示，并且更改后需要多处更改)

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

$scope.change = function() {

$scope.test = new Date();

};

$scope.getOrig = function() {

return $rootScope.test;

};

})

作用域继承 的 模块通讯

作用域继承是在子模块中可以直接使用父模块方法/变量的 通讯方式

** 只适合数据从 父模块传递到子模块 **

** 在指令的数据传递中 通常使用这种模式进行通讯 **

Do

特点：

只适合数据从 父模块传递到子模块

子模块的同名方法会覆盖父模块的 方法/变量

不能进行同级组件之间的数据传递。除非显示更改 $rootscope

层级较多时 维护比较麻烦

作用域通讯 + $watch

作用域的数据只能从 父作用域传递到子作用域，** 使用 $watch() 可以监控子作用于数据的改变，类似于 指令数据传递的 = ( 等于号 ) **

.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 用于注册事件函数，

$emit 用于事件向上冒泡传递

优缺点: 相比于 $emit，$boardcast 需要向所有的子组件广播组件的改变，会消耗更多的资源

** 所以 在应用的通讯数据达到很大体量 **

$rootscope $scope + watch 都可以成为设计的基本手法

使用 Service 进行通讯

因为 angular 中所有的 Service 都是单例的，使用 Service 能够比 时间隧道机制在逻辑上更加清晰。

简单抽取基本的数据

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 来监测数据变化

angular.module('Store', [])

//  提供基本数据模型初始数据的 Service

.factory('Products', function() {

return {

query: function() {

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

}

};

})

//  提供数据模型的 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 {        // 返回完整的数据模型

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));

});

//  整个页面只有这里需要根据数据模型的变化而 改变视图 UI

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

Add

Remove

angularjs的$watch、$watchGroup、$watchCollection 使用方式 区别

angular 几种数据通讯机制

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

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

var sharedService = {};

sharedService.message = '';

sharedService.prepForBroadcast = function(msg) {

this.message = msg;

this.broadcastItem();      // 执行 广播

};

sharedService.broadcastItem = function() {

$rootScope.$broadcast('handleBroadcast');

};

return sharedService;

});

function ControllerZero($scope, sharedService) {

$scope.handleClick = function(msg) {

sharedService.prepForBroadcast(msg);        // 调用包含广播的函数

};

$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.jianshu.com/p/959cb6bb7036

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。