AngularJS简单的数据绑定

最新推荐文章于 2019-12-24 15:22:18 发布

原创最新推荐文章于 2019-12-24 15:22:18 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #angularjs

初识AngularJS 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在AngularJS中使用ng-model指令实现视图与数据模型之间的双向数据绑定，并通过创建控制器来更新视图中的数据。通过实例演示了如何在文本输入字段和视图元素中实时同步数据变化。

审阅一下上面写的代码,我们使用ng-model指令将内部数据模型对象($scope)中的name

属性绑定到了文本输入字段上。
  这意味着无论在文本输入字段中输入了什么,都会同步到数据模型中。

数据模型对象(model object)是指$scope对象。$scope对象是一个简单的JavaScript对象,其中的属性可以被视图访问,也可以同控制器进行交互。如果不理解这个概念也没有关系,后面的例子将会对这个概念进行详细说明。双向数据绑定(bi-directional)意味着如果视图改变了某个值,数据模型会通过脏检查观察到这个变化,而如果数据模型改变了某个值,视图也会依据变化重新渲染。

在输入字段上使用ng-model指令来实现数据绑定,如下所示:

<h1>Hello{{ person.name }}</h1>

这样绑定就设置好了(没错,就是这么简单)。我们可以观察一下视图是如何更新数据模型的。当输入字段中的值发生变化时,person.name会被更新,而视图将反映出这个更新。

我们仅通过视图就实现了一个双向数据绑定。为了从其他角度(后端到前端)解释双向数据绑定,后面会深入介绍控制器。

正如ng-app声明所有被它包含的元素都属于AngularJS应用一样,DOM元素上的ng-controller声明所有被它包含的元素都属于某个控制器。

为了解释这个概念,我们将前面的例子修改成如下的样子:

<div ng-controller='MyController'>
  <input ng-model="person.name" type="text" placeholder="Your name">
  <h1>Hello {{ person.name }}</h1>

</div>在这个例子中,我们会创建一个每秒钟走一步的时钟(时钟通常都是这样的),并更新clock

变量上的数据:

function MyController($scope, $timeout) {
var updateClock = function() { 8

    $scope.clock = new Date();
    $timeout(function() {

  updateClock();
}, 1000);

9}; 10

};
updateClock();

在这个例子中,MyController函数接受两个参数,即该DOM元素的$scope和$timeout。第13章将介绍如何使用不同的变量定义函数。

11在这个例子中,当定时器触发时会调用updateClock()函数,将$scope.clock的值设置为当 12

前时间。
 $timeout对象 13

可以在视图中将clock变量用{{ }}包起来,以显示$scope中的clock的值:

<div ng-controller="MyController">
  <h5>{{ clock }}</h5>

</div>

下面是完整的示例代码:

<!doctype html>
<html ng-app>

  </head>
  <body>

    <div ng-controller="MyController">
      <h1>Hello {{ clock }}!</h1>

1415161718

  </div>
         <script type="text/javascript">
         function MyController($scope, $timeout) {

             var updateClock = function() {
               $scope.clock = new Date();
               $timeout(function() {

                 updateClock();
               }, 1000);

};

             updateClock();
           };

         </script>
       </body>

</html>

上面的代码可以修改成:

     <!doctype html>

     <html ng-app>
       <head>

       <body>
         <div ng-controller="MyController">

           <h1>Hello {{ clock }}!</h1>
         </div>

</html>

将前面例子中的JavaScript代码放在js/app.js文件中,而不是将它直接写在HTML中。

// 在app.js中
function MyController($scope, $timeout) {

       var updateClock = function() {
         $scope.clock = new Date();
         $timeout(function() {

           updateClock();
         }, 1000);

};

       updateClock();
     };