深入浅析AngularJS中的一次性数据绑定 (bindonce)_网络技术

一、理解双向数据绑定和监听器

为了实现双向数据绑定，AngularJS使用了$watch API来观察期作用域中的模型变化。具体的作用域取决于你的代码如何编写。如果你没有创建一个自作用域，就是说没有使用ngController指令在你的DOM和你的控制器代码之间创建一个关联，你可能处理的是跟作用域$rootScope，这个作用域由ngApp自动创建，并且是应用中所有作用域的父作用域，当然，如果你选择手动启动AngularJS，那情况就另当别论了。每当你创建了一个数据绑定时，AngularJS就会自动创建一个监听器来监听这个数据的变化。比如说下面这个简单的例子:

<p>Hello {{name}}!</p>

在这个例子中，我们使用了插值指令，这个指令会注册一个监听器来监听相应作用域中属性name的变化，并在该属性发生变化时将它实时反应到DOM中。

添加下面的代码，你的name属性将会自动的被赋值为Pascal：

angular.module('myApp', []) 
 .run(function ($rootScope) { 
  $rootScope.name = "Pascal"; 
}]);

通过上面的代码，我们就成功的使用了插值指令创建了在试图上创建了一个数据绑定。现在，如果name属性发生变化，视图将会自动发生更新。比如说我们添加下面的代码，在按钮点击是修改name的值:

<button ng-click="name = 'Christoph'">Click me!</button>

此时，点击按钮，我们可以将name的值修改为Christoph，同时我们会触发一个$digest循环来更新DOM中相应的部分。在上面的例子中，你看的知识单向数据绑定。然而，你完全可以使用ngModel指令来将视图中发生的变化实时的反应到模型中。

上面的双向绑定魔法的实现完全依赖于$digest循环，当$digest循环被触发时，AngularJS将会去处理遍历当前作用域和子作用域中的所有监听器，然后通过检查模型中发生的变化来更新DOM中的值，直到模型不再发生变化为止。一旦$digest循环执行完成，浏览器会重新渲染DOM来反应模型数据变化。

现在，我们大概了解了AngularJS的数据绑定机制，你可能会问我们为何还需要一次性数据绑定。

由于AngularJS使用监听器来实现数据绑定。当监听器越来越多时，可能会出现一些性能上的问题。由于在注册监听器使，同时会注册一个回调函数，以便在$digest循环执行时能够相应的更新视图。也就是说，监听器越多，AngularJS需要处理的回调函数也就越多。

现在假设在视图中有很多值需要被AngularJS处理。比如说像上面使用插值指令来进行数据绑定，虽然我们可能并不想让这个值只绑定一次，比如说上面的Pascal，在应用代码执行的整个过程中这个属性都不会发生改变，但是AngularJS默认依然会在这个属性上绑定一个监听器和回调函数。因此，在$digest时，AngularJS依然会去特意的关注这个值，这实在是有些过头了。

二、一次性数据绑定(One-time bindings)

这就是我们需要一次性数据绑定的原因。在AngularJS的文档中，我们可以清楚的了解到这个新特性的作用:一次性数据绑定表达式可以在数据稳定之后，不需要在$digest循环中重计算…

一次性数据绑定的出现解决了前面提到的由监听器太多带来的性能问题。那么我们应该如何使用一次性数据绑定呢？

使用一次性数据绑定非常的简单，我们只需要在表达式之前加上双冒号::即可。比如，前面我们使用了插值指令将name属性绑定到了视图中:

<p>Hello {{name}}!</p>

使用一次性数据绑定，我们这样写:

<p>Hello {{::name}}!</p>

在AngularJS 1.3版本中，你可以在任何AngularJS的表达式中使用一次性数据绑定。即使在诸如ng-repeat这样严重依赖于双向绑定的指令中，你依然可以使用它。

以上所述是小编给大家介绍的AngularJS中的一次性数据绑定 (bindonce)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# angularjs # bindonce # 一次性绑定 # 详谈AngularJs 控制器、数据绑定、作用域 # AngularJS1.X学习笔记2-数据绑定详解 # AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】 # AngularJS入门教程之数据绑定原理详解 # AngularJS入门教程之数据绑定用法示例 # AngularJS 双向数据绑定详解简单实例 # AngularJS实践之使用NgModelController进行数据绑定 # 详解JavaScript的AngularJS框架中的作用域与数据绑定 # angularjs学习笔记之双向数据绑定 # Angularjs中数据绑定的实例详解 # 绑定 # 将会 # 插值 # 使用了 # 创建一个 # 回调 # 要在 # 我们可以 # 越多 # 小编 # 的是 # 应到 # 就会 # 如果你 # 太多 # 在这个 # 你可以 # 也就 # 在此 # 这就是

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】