Angular JS 作用域和数据绑定

作用域

作用域（$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 />             &ltspan ng:bind="name"&gt <span ng:bind="name"></span>             <br />             &ltspan ng_bind="name"&gt <span ng_bind="name"></span>             <br />             &ltspan data-ng-bind="name"&gt <span data-ng-bind="name"></span>             <br />             &ltspan x-ng-bind="name"&gt <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 是否为尾元素