Question

在AngularJS中，如何在没有双向数据绑定的情况下渲染值？出于性能原因，甚至可能在给定时间点渲染值，可能需要这样做。

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

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

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

如何在没有任何数据绑定的情况下呈现value ？

Answer 1

Angular 1.3 +

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

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

如this answer中所述。

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/

你们中的一些人可能正在使用角度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')

Answer 2

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

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

一次性绑定

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

Answer 3

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

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

此库允许您渲染仅绑定一次的项目 - 首次初始化时。对这些值的任何进一步更新都将被忽略。这是减少页面上手表数量的好方法，用于渲染后不会改变的事物。

用法示例：

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

如果像这样使用，value下的属性会在可用后设置，但手表将被禁用。

Answer 4

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

传统的ngRepeat of angular：15s for 2000 rows and 420mo of RAM（Plunker）

使用ngRepeat和@OverZealous模块：7s表示2000行和240mo RAM（Plunker）

使用ngRepeat和@Connor指令：8s表示2000行和500mo RAM（Plunker）

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

Answer 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>

在没有数据绑定的情况下渲染值

5 个答案: