你的位置:首页 > Java教程

[Java教程]Angular的作用域和数据绑定


初识Angular.js

通过初识Angular.js可以做一个简单的入门,下面开始做深入的了解吧。

作用域

作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器之间的胶水。在应用将视图渲染并呈献给用户之前,视图中的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AngularJS。

基于动态绑定,我们在修改视图数据时立刻更新$scope,而$scope发生变化时也会立刻渲染视图。

 

 <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标签自定义模板,如下

<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模板页并清除所有代码,粘贴如下代码保存

<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 是否为尾元素

前段时间项目比较紧,一直没有更新。现在也正准备换工作了,离开这有些不舍啊。