Angular控制器和$scope

最新推荐文章于 2024-11-10 15:10:09 发布

weixin_33856370

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zengm/p/3991279.html

版权

控制器的作用

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>