87

在 AngularJS 中，如何在没有 2 路数据绑定的情况下呈现值？出于性能原因，甚至在给定时间点渲染一个值，人们可能想要这样做。

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

<div>{{value}}</div>

<div data-ng-bind="value"></div>

如何在value 没有任何数据绑定的情况下进行渲染？

4

5 回答 5

141

角 1.3+

在 1.3 中，Angular 使用以下语法支持这一点。

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

正如这个答案中提到的。

Angular 1.2 及以下

这很简单，不需要插件。看一下这个。

这个小指令将轻松完成您想要实现的目标

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope ) {
            setTimeout(function() {
                $scope.$destroy();
            }, 0);
        }
    }
});

你可以像这样绑定一次

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

你可以像平常一样绑定

<div ng-bind="message" bind-once></div>

演示：http: //jsfiddle.net/fffnb/

你们中的一些人可能正在使用 angular batarang，如评论中所述，如果您使用此指令，则元素仍显示为绑定，但我很确定这与附加到元素的类有关，所以试试这个，它应该可以工作（未经测试）。如果它对你有用，请在评论中告诉我。

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope, $element ) {
            setTimeout(function() {
                $scope.$destroy();
                $element.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

@x0b：如果您有强迫症并且想要删除空class属性，请执行此操作

!$element.attr('class') && $element.removeAttr('class')
于 2013-09-13T16:57:43.413 回答
49

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

https://docs.angularjs.org/guide/expression#one-time-binding

一次性绑定

以 :: 开头的表达式被视为一次性表达式。一次性表达式一旦稳定就会停止重新计算，如果表达式结果是未定义的值，则在第一次摘要之后发生（请参阅下面的值稳定算法）。

于 2014-06-04T16:45:35.070 回答
20

使用bindonce 模块。您需要包含 JS 文件并将其作为依赖项添加到您的应用模块：

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

这个库允许你渲染只绑定一次的项目——当它们第一次初始化时。对这些值的任何进一步更新都将被忽略。对于渲染后不会更改的内容，这是减少页面上观看次数的好方法。

使用示例：

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

像这样使用时，value一旦它可用，就会设置下面的属性，但随后手表将被禁用。

于 2013-09-13T16:00:53.593 回答
7

@OverZealous 和 @Connor 答案之间的比较：

使用传统的 ngRepeat 角度：2000 行 15s 和 420mo RAM ( Plunker )

使用 ngRepeat 和 @OverZealous 模块：2000 行需要 7 秒，RAM 需要 240 个月（Plunker）

使用 ngRepeat 和 @Connor 的指令：2000 行 8 秒和 500 莫 RAM（Plunker）

我使用 Google Chrome 32 进行了测试。

于 2014-05-05T08:11:15.190 回答
5

作为替代方案，有angular-once包：

如果您使用 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>
于 2014-09-10T01:12:31.613 回答