Javascript 无数据绑定的呈现值

在AngularJS中，如何在没有双向数据绑定的情况下呈现值？出于性能原因，甚至在给定时间点呈现值，可能需要执行此操作

以下示例都使用数据绑定：

{{value}}

如何在没有任何数据绑定的情况下呈现值。您需要包括JS文件，并将其作为依赖项添加到您的应用程序模块：

var myApp = angular.module("myApp", ['pasvaz.bindonce']);

此库允许您呈现仅绑定一次的项—当它们第一次初始化时。对这些值的任何进一步更新都将被忽略。这是一个很好的方法，可以减少页面上的手表数量，因为这些手表在渲染后不会改变

用法示例：

<div bo-text="value"></div>

---

当这样使用时，

value

下的属性一旦可用就会被设置，但随后手表将被禁用。

角度1.3+

在1.3中，Angular使用以下语法支持此功能

<div>{{::message}}</div>

你可以这样绑一次

<div bind-once>I bind once - {{message}}</div>

：如果您患有强迫症，并且希望删除空的

class

属性，请执行此操作

!$element.attr('class') && $element.removeAttr('class')

---

@Over热心”和@Connor答案之间的比较：

使用传统的角度重复：2000行15s，内存420mo（）

使用ngRepeat和@OverZearious:7s模块，用于2000行和240mo的RAM（）

使用ngRepeat和@Connor:8s指令，用于2000行和500mo RAM（）

我用Google Chrome 32进行了测试。

看起来Angular 1.3（从beta 10开始）内置了一次性绑定：

一次性装订

以：：开头的表达式被视为一次性表达式。 一次性表达式稳定后将停止重新计算， 如果表达式结果为 非未定义值（参见下面的值稳定算法）

---

另一种选择是，提供以下软件包：

如果使用AngularJS，则会出现性能问题，并且需要显示很多 对于只读数据，此项目适合您

angular once

实际上是受到

bindonce

的启发，并提供了类似的

once-*

属性：

<ul>
    <li ng-repeat="user in users">
      <a once-href="user.profileUrl" once-text="user.name"></a>
        <a once-href="user.profileUrl"><img once-src="user.avatarUrl"></a>
        <div once-class="{'formatted': user.description}" once-bind="user.description"></div>
    </li>
</ul>

您的输入和输出是什么。plz解释您的示例实际上是单向数据绑定（模型更改->视图更新）<代码>ng模型提供双向数据绑定：模型更改->视图更新，视图更改->模型更新.updated。对不起，我的意思是我不想在allI进行数据绑定。我不认为这个问题很糟糕，或者值得否决。实际上，想要禁用数据绑定以防止不必要的手表是很常见的。更新：阅读本文的任何人都可能会发现这段视频非常有用。我正要写一个答案“编写您自己的指令…”，但看起来好像有人已经为我们做了这件事，很好。Bindonce非常有用，它可以作为一个内置的可选库包括在内，如

$resource

。这就是我一直在寻找的，但我希望类似的东西能够被内置到angular中！我还没有测试插件，但我假设AngularJS chrome工具不会将bind once元素显示为绑定，就像您的示例那样。有趣的方法tho，我将很快测试这两种方法。看到这一点-毫无疑问，它将两者都显示为绑定，这是因为如果您可以轻松删除的ng绑定类，那么这一点非常好，并且比bindonce插件简单得多。我添加了一个功能，可以在销毁作用域之前等待条件，这非常有用。谢谢，康纳，我不同意。例如，我正在从RESTAPI接收一个视频对象（$scope.video），我想要一次性绑定视频标题（$scope.video.title）。即使在将承诺添加到控制器中的作用域之前解决了它，我仍然必须在DOM上声明ng bind=“video.title”bind一次。现在，在承诺得到解决之前，video.title是未定义的，而作用域在video.title被定义之前被销毁。对此，我有一个解决方案，就是用某种类型的loading/init标志ng if=“someLoadingFlag”包装元素，但这是一个糟糕的模式。这个答案反复出现。卡尔，我对你赞不绝口！我强烈推荐在任何有意义的地方积极使用这个功能。哇，我真的很高兴我向下滚动了。我要请Connor在他接受的答案中引用这一点。我有一个2000行的表/列表，使用一次性绑定操作符，我的应用程序在第一次显示/呈现列表时速度非常慢。太慢了，浏览器会问我两三次是否要停止执行脚本@billy-g你能发布一个JSFIDLE或plunker来说明这个问题吗？@James Daily:这里是“正常”案例，这里是“一次性表达”案例，但是。。。我无法在那里复制它。无论如何，“一次性表达式”不会更快，我必须做更多的调查，以找出为什么它会发生在我的环境中（我使用angularjs的1.3 beta 18），如果能比较一下

angular，那就更好了。谢谢。@alecxe:我计划在AngularJS 1.3的稳定版本发布时进行测试。谢谢，别忘了包括这个包（我已经在这里发布了它作为一个可选选项）。
app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope, $element ) {
            setTimeout(function() {
                $scope.$destroy();
                $element.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

!$element.attr('class') && $element.removeAttr('class')

<ul>
    <li ng-repeat="user in users">
      <a once-href="user.profileUrl" once-text="user.name"></a>
        <a once-href="user.profileUrl"><img once-src="user.avatarUrl"></a>
        <div once-class="{'formatted': user.description}" once-bind="user.description"></div>
    </li>
</ul>