标签：
作用域（$scope）和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器之间的胶水。在应用将视图渲染并呈献给用户之前，视图中的模板会和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知给AngularJS。
基于动态绑定，我们在修改视图数据时立刻更新$scope，而$scope发生变化时也会立刻渲染视图。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<script type="text/javascript">function loadController($scope) { $scope.name = "博客园"; $scope.loadAgain = function () { $scope.name = "我的博客"; }; };</script> <div ng-app> <div ng-controller="loadController"> <input ng-model=‘name‘/> <button ng-click="loadAgain()"> 切换</button> <hr /> <span ng:bind="name"> <span ng:bind="name"></span> <br /> <span ng_bind="name"> <span ng_bind="name"></span> <br /> <span data-ng-bind="name"> <span data-ng-bind="name"></span> <br /> <span x-ng-bind="name"> <span x-ng-bind="name"></span> </div></div> |
上面的代码中，我们给一个 div 元素指定了一个loadController(控制器)，那么div 元素之内，就是 loadController 这个函数运行时， $scope 这个注入资源的控制范围。
在这个控制范围内的html中，可以访问到$scope的变量：$scope.name，函数$scope.loadAgain。
前面已经讲过了，在页面作用域范围内可以通过ng-model、ng-bind等之类的指令来绑定变量。
其实还可以使用{{name}}来完成数据绑定。
说说模板吧，模板的绑定有三种：
1.页面内直接写html代码（前面的数据绑定就是了）
2.使用script标签自定义模板，如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<script type="text/javascript"> function tablelist($scope) { $scope.userlist = [{ name: "张三", age: "23" }, { name: "李四", age: "25"}] }; </script><script type="text/ng-template" id="tpl"> <table ng-controller="tablelist"> <tr> <th> 姓名 </th> <th> 年龄 </th> </tr> <tr ng-repeat="app in userlist"> <td> {{app.name}} </td> <td> {{app.age}} </td> </tr> </table></script> <div ng-include src="‘tpl‘"></div> |
3.引用外部文件
新建test.html模板页并清除所有代码，粘贴如下代码保存
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<table ng-controller="tablelist"> <tr> <th> 姓名 </th> <th> 年龄 </th> </tr> <tr ng-repeat="app in userlist"> <td> {{app.name}} </td> <td> {{app.age}} </td> </tr></table> |
当前页直接引用test.html，<div ng-include src="‘test.html‘"></div>
效果都是一样的：
模板引用中用到了 ng-include，还有渲染指令 ng-repeat把对象数组循环渲染到了页面，ng-repeat还提供了几个可使用的变量：
$index 当前索引
$first 是否为头元素
$middle 是否为非头非尾元素
$last 是否为尾元素
标签：
原文地址：http://www.cnblogs.com/fannylovo/p/4858078.html
