angularjs UI控制其分离,scope应用及$watch观察模型变化

   在上一节讲完了关于应用开发中如数据绑定，添加样式一类的基础操作后，接下来，将在应用中，与控制其有关的一些事件。。。

一、UI和控制器的分离

我们需要明确控制器在应用中的三个作用：

【1】在应用模型中设置初始状态

【2】通过$scope对象向视图（UI模版）暴露函数和模型

【3】监视模型发生变化的其他部分并做出相应的动作

二、发布scope中的数据模型

 传递给控制器的$scope对象是一种用来向视图暴露模型数据的机制。在我们构建的应用中可能有其他数据，但是通过scope传递这些属性时，angular只考虑模型部分。

 在之前的荔枝中，我们经常看到$scope构建的数据实例，而这一过程是在控制器中完成，在这里，我们也可以通过一些间接的方法从模版建立模型。

1.使用表达式：由于表达式在可它们关联的控制器中执行，所以在表达式中设置属性和控制器中设置属性是一致的。即可以如下这么做

<button ng-click='count=3'>Set count to three</button>

其等同于

<div ng-controller='CountController'>
<button ng-click='setCount()'>Set count to three</button>
</div>

控制器定义

function CountController($scope) {
$scope.setCount = function() {
$scope.count=3;
}
}

2.通过ng-model进行一个数据绑定

三、用$watch观察模型变化

$watch(watchFn, watchAction, deepWatch)

该函数每个参数详细内容

watchFn:这个参数是angualr表达式字符串或返回监控模型的当前值的函数。

watchAction：这是一个函数或者表达式，当watchFn变化时将调用他们。它有watchFn的心新旧值及一个scope引用，函数签名function(newValue,oldValue,scope);

deepWatch:这是一个可选的布尔参数，如果设置成true,angualr将检查在被监视对象中每个属性的每次变化。如果希望监视数组中私有元素或者对象中的属性，而不是仅仅一个简单的值的时候，便可使用该参数。

这里结合之前的一个购物车的荔枝进行简单的分析

<div ng-controller="CartController">
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity">
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
</div>
<div>Total: {{totalCart() | currency}}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>Subtotal: {{subtotal() | currency}}</div>
</div>

CartController代码：

function CartController($scope) {
$scope.bill = {};
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.totalCart = function() {
var total = 0;
for (var i = 0, len = $scope.items.length; i < len; i++) {
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
return total;
}
$scope.subtotal = function() { return $scope.totalCart() - $scope.bill.discount;
};
function calculateDiscount(newValue, oldValue, scope) {
$scope.bill.discount = newValue > 100 ? 10 : 0;
}
$scope.$watch($scope.totalCart, calculateDiscount);
}

在 CartController控制器末尾，我们在totalCart()上面建立了一个监视，而totalCart()是用于计算付款总额，每当这个值发生变化时，watch函数便会调用其后面的calculateDiscount(),然后进行相应的操作。



Watch()性能注意事项

而在上述的荔枝中有个小小的问题，当你在totalCart()加一个调试断点，你会看到它被调用了六次以后才渲染到页面；

而这六次分别是：

1.模版的{{totalCart|currency}}

2.SubTotal()函数

3.$watch()函数

 而在这三次基础之上，angular自身会再运行它们一次，以便验证传递的模型变化已经完全传递，模型已经不再变化。

对与这样多次调用可能造成的潜在问题，我们有以下的几种方法去解决；

【1】在数组中的每个元素上创建$watch监控变化，这样仅仅需要重新去计算total,discount和subtotal.

为了实现这个点，我们可以用以下几种方法来更新模版

<div>Total: {{bill.total | currency}}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>Subtotal: {{bill.subtotal | currency}}</div>

然后在js中我们监视数组中的元素，数组发生任何变化都会调用函数重新计算总值。

function CartController($scope) {
$scope.bill = {};
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
var calculateTotals = function() {
var total = 0;
for (var i = 0, len = $scope.items.length; i < len; i++) {
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
$scope.bill.totalCart = total;
$scope.bill.discount = total > 100 ? 10 : 0;
$scope.bill.subtotal = total - $scope.bill.discount;
};
$scope.$watch('items', calculateTotals, true);
}

在这里我们看到$watch指定了一个items字符串，这是可以的，并且该字符串将作为表达式在调用它的$scope作用域中执行

四、组织模块依赖