代码改变世界

Angular控制器和$scope

2014-09-24 18:02  Z梦  阅读(1211)  评论(0)  编辑  收藏  举报

控制器的作用

  • 1. 为应用中的模型设置初始状态，和ng-init作用一样
  • 2.通过$scope对象把数据模型和函数暴露给视图
  • 3.监视模型其余部分的变化，并采取相应的动作。

从前面的例子中大家已经注意到了控制器是绑定在特定的DOM片段上的，这些片段就是它们 需要负责管理的内容，我们有两张方法绑定到DOM节点上。

  • 1.在模板中通过ng-controller属性声明到DOM节点上
  • 2.通过路由动态绑定到DOM节点上（这个在后面将会阐述）
  •  1 <!DOCTYPE html>
 2 <html ng-app="">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6 </head>
 7 <body ng-controller="myCtrl">
 8     <p>{{greet.text}},World</p>
 9     <script src="js/angular-1.2.16.js"></script>
10     <script>
11         function myCtrl($scope)
12         {
13             $scope.greet = { text: "Hello" };
14         }
15     </script>
16 </body>
17 </html>
    View Code

    通过上面的例子我们可以发现控制器和js中的方法没有什么区别，只是多了一个参数$scope.

$scope

$scope是什么

$scope，在前面的几节中我们说在表达式中读取变量，而实际上表达式里读取的变量叫做属性 更为确切，所谓的变量其实是$scope对象的一个属性,即$scope是表达式的上下文。我们可以在$scope对象作用域范围内对其 属性进行操作。

$scope的层次结构

每个angular应用有且只用一个rootScope，但可以拥有多个child scope。

一个应用可以有多个作用域，因为一些指定会生成新的作用域（如ng-repeat），当新的作用域被创建，他们将会被作为一个 child scope就会添加到父作用域，这样，创建了一个与它们附属的DOM相似的树结构。

当angular对表达式{{expression}}求值时，它首先查看与当前元素关联的scope属性，如果没有找到，她将会一直向上寻找 parent scope直到找到rootScope，在Javascript这种行为被称为“原型继承”。

$scope的函数$watch

$scope内置有很多函数，使用最多的是$watch函数，当你的数据模型中的某一部分发生变化，$watch函数可以 向你发出通知，他的函数签名为

$watch(watchFn,watchAction,deepWatch)这个函数返回一个函数，用来注销监控。

接下来我们看个小例子。

 1 <!DOCTYPE html>
 2 <html ng-app="">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6 </head>
 7 <body ng-controller="myCtrl">
 8     <input type="text" ng-model="num" />
 9     <p>{{price}}</p>
10     <script src="js/angular-1.2.16.js"></script>
11     <script>
12         function myCtrl( $scope )
13         {
14             $scope.num = 10;
15             $scope.price = 0;
16             function callBack( newVal, oldVal, scope )
17             {
18                 $scope.price = newVal > 100 ? 10 : 0;
19             }
20             $scope.$watch("num", callBack )
21         }
22     </script>
23 </body>
24 </html>
View Code

这里我们监控了input的输入值，如果大于100就把p显示为10

这里watchFn是一个带有Angular表达式，watchFn可以是一个带有Angular表达式或者函数的字符串， 它会返回被监控的数据模型的当前值。它会被执行很多次，所以你要保证它不会产生其他副作用。

watchAction是一个函数或者表达式，当watchFn被调用时，如果是函数的形式，它将会接收到watchFn 新旧两个值，以及作用域对象的引用。function(newValue,oldValue,scope)

deepWatch,这是一个可选的布尔类型参数，如果监控的不是一个简单的值，就可以使用这个参数，angular 会去遍历数组或者对象。

$scope的生命周期

  • 1.创建 ——根作用域是在应用被$injector启动时创建的。在模板链接阶段，有些指令会创建新的子作用域。