AngularJS中的一次性数据绑定 (bindonce)

关注

原创最新推荐文章于 2026-04-14 19:54:36 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

angular-once, AngularJS的一次绑定.zip angular-once, AngularJS的一次绑定的角度一次AngularJS的一次绑定。为什么？arraylist是一个很好的框架，但是它用来显示大量数据，因为它的绑定机制很慢。当通过 {{ }} 或者 ng-bind 指令绑定数据时，Angular 将在每次执行 Angular 立即下载

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

为了实现双向数据绑定，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依然会去特意的关注这个值，这实在是有些过头了。