AngularJS应用开发思维之2：数据绑定

时间：2020-11-29 15:29:24

在声明式模板中显示数据

因为不能像jQuery一样将DOM操作混在模板里，声明式模板很快让我们变得束手束脚。

一个典型的问题：在声明式模板里怎么显示数据？

假设我们有某人的基本信息，保存在一个json对象里：

  1. var sb = {
  2. name : 'somebody',
  3. gender : 'male',
  4. age : 28
  5. };

我们定义一个指令ez-namecard，希望它经过编译后会展开成这样：

  1. <div>
  2. <div>name : somebody </div>
  3. <div>gender : male </div>
  4. <div>age : 28</div>
  5. </div>

那么，怎么把sb这个json对象指定给ez-namecard这个指令？

将数据传递给指令

一个容易想到的方法，就是给指令ez-namecard增加一个属性，用这个属性的值 指定数据对象的变量名称。

这相当于，用属性向指令（解释器）传递参数：

  1. <ez-namecard data="window.sb"></ez-namecard>

这样的话，ez-namecard的解释器只要检查data属性，然后执行一个eval()就可以获得sb的值， 从而将其内容填充到展开的div片段中。

BINGO！

示例：http://www.dwz.cn/26R4S5

作用域/Scope

不过，请注意，前面定义的sb变量，默认是挂在window对象（命名空间）上的，即window.sb。 如果所有的数据都挂在window上，保不齐哪天就会出现变量的命名冲突。

AngularJS引入了一个自用的命名空间，也就是$rootScope对象，这样sb变量就可以 挂在$rootScope上了，即$rootScope.sb。

引入了scope的代码参见→_→。

在HTML模板中，我们用了两个内置指令：

  • ng-app指令会在启动引导时创建一个$rootScope对象。
  • ng-init指令用来在作用域上初始化变量，这个指令将在$rootScope上建立sb对象。

在指令的实现代码中，与之前使用eval函数进行表达式估值不同，我们直接使用scope的$eval方法获 得sb变量的值。

你可能注意到，这个scope是link函数传入的参数，它和我们说的$rootScope是一个东西吗？

层级的作用域

在AngularJS中，ng-app开始的DOM子树上，每个DOM对象都有一个对应的scope对象。 比如，在我们的示例中，body对象对应一个scope对象（因为body元素有ng-app属性，所以 这个scope就是$rootScope对象），ez-namecard对象也对应一个scope对象......

AngularJS应用开发思维之2：数据绑定

在默认情况下，一个DOM子元素不会创建新的作用域，也就是说，这个子元素所对应的 scope对象，其实就是它的最近一级的祖先对象对应的scope对象。比如，在我们的例子中， ez-namecard对应的scope对象，就是它的父对象即body对象的scope对象，恰好也就是 $rootScope对象；而ez-namecard有3个div子元素对应的scope对象，也是$rootScope对象。

有些指令会导致创建新的作用域，比如ng-controller。如果在一个DOM对象上创建了新 的作用域，那么这个scope对象的原型是其最近一级的组件对象的scope对象。

比如在我们的例子中，如果在ez-namecard上使用ng-controller指令，那么ez-namecard 对应的scope对象就不再是body对应的$rootScope对象，但是由于是原型继承，所以通过 这个scope依然可以访问到sb变量。

示例：http://www.dwz.cn/26R4S5

监听数据的变化

我们已经实现了将数据显示到界面上，不过这还不够。

由于编译仅仅在启动引导时执行一次，这意味着我们的link函数只会被调用一次，那么， 如果数据变化，在界面上将不会有任何反馈，即界面和数据将变得不同步了。

这需要持续监听数据的变化。

好在AngularJS的scope对象可以使用$watch()方法，对建立在其上的变量的变化进行监听：

  1. $watch(watchExpression, listener, [objectEquality]);

$watch方法要求传入三个参数：

  • watchExpression - 要监听的表达式，比如："sb"
  • listener - 变化发生时的回调函数，AngularJS将向这个函数传入新值和旧值
  • objectEquality - 如果监听表达式的值是一个对象，应当将这个参数置为true。

→_→是经过改进后的代码，当数据被改变时，界面会自动得到更新。这时，我们称，建立了从 数据到界面的单向绑定。为了验证这一点，在代码中我们追加了一个定时器自动 更新数据的age值。

你可以试着去掉监听部分代码，看有什么效果。

如何修改数据

一旦在指令的实现代码中可以访问数据模型，那么使用声明式模板实现数据 修改也非常简单了。

我们定义一个新的指令：ez-namecard-editor，意图让其展开成这样：

  1. <ul>
  2. <li>name : <input type="text"> </li>
  3. <li>gender : <input type="text"> </li>
  4. <li>age : <input type="text"></li>
  5. </ul>

在ez-namecard-editor的指令实现中，为了用input中的值自动更新 sb变量中的值，我们需要在给input对象挂接上监听函数（示例中使用keyup事件）， 在监听函数中实现对sb变量的修改。

最终的效果是，用户在界面上进行的操作，自动地同步到了我们的数据。这时，我们称， 已经建立了从界面到数据的单向绑定。

→_→的示例代码中，为了验证绑定的效果，我们增加了一个ez-logger指令。这个指令 将一个DOM元素的内容绑定到指定的变量上。

这样，当我们通过ez-namecard-editor修改数据时，可以同步地看到变化后的内容。

参考资料：http://www.dwz.cn/26R4S5

相关文章