Angular JS 学习笔记四
下面谈谈controller和scope的概念。Angular JS是建立在MVC的架构上，HTML相对于Angular JS来说是view，那我们如何控制view上面的model呢，那我们引入controller的概念。controller就是控制器，就是对数据的操作。最简单的就是加减乘除的操作。下面以例子说话。
需求：输入金额，自动计算税（假定税率为6%）和总金额并输出。
那么首先我们建立最基本的输入和输出html
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js">script><script>var app = angular.module('myApp',[]);app.controller('CostCtrl', function($scope){$scope.cost = 1000.1;$scope.tax = $scope.cost * 0.06;});script>
head><body ng-app="myApp" ng-controller="CostCtrl">Cost: <input type="text" ng-model="cost" placeholder="cost" /><p>This is your cost: {{cost|currency}}<br>This is your tax: {{tax|currency}}p>
body>
html> scope的概念就是在这个controller里面的一个元素和函数的集合。所有变量都可以通过这个 scope获得。
那么如何理解这个scope变量所定义的范围呢？
在一个ng-app里面，创建三个ng controller，例如下代码：
<body ng-app="myApp" ><div ng-controller="CostCtrl">Cost: <input type="text" ng-model="cost" placeholder="cost" /><p>This is your cost: {{cost|currency}}<br>p>div><div ng-controller="CostCtrl">Cost: <input type="text" ng-model="cost" placeholder="cost" /><p>This is your cost: {{cost|currency}}<br>p>div><div ng-controller="CostCtrl">Cost: <input type="text" ng-model="cost" placeholder="cost" /><p>This is your cost: {{cost|currency}}<br>p>div>
body>那么所显示的就像是这样
你会发现，改变第一个Cost不会影响到第二和第三个Cost，这个就是scope的限制。
下面还有一点要介绍，在计算tax的时候，你会发现第一段代码中tax是不会根据cost的变化而变化。那如何解决这个问题呢？答案是$watch。如下面代码所示：
