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

Question

在AngularJS中,如何在没有双向数据绑定的情况下呈现值？出于性能原因,或者甚至在给定时间点渲染值,可能希望这样做.

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

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

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

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

Answer 1

Angular 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/

你们中的一些人可能正在使用角度batarang,并且如评论中所提到的,如果你使用这个指令,元素仍然显示为绑定,当它不是时,我很确定这与附加到元素的类有关试试这个,它应该工作(没有测试).如果它对您有用,请在评论中告诉我.

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

@ x0b:如果您有OCD并且想要删除空class属性,请执行此操作

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

Answer 2

看起来像Angular 1.3(从beta 10开始)内置了一次性绑定:

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

一次性绑定

以::开头的表达式被视为一次性表达式.一次性表达式将在稳定后停止重新计算,如果表达式结果为非未定义值,则会在第一次摘要后发生(请参阅下面的值稳定算法).

Answer 3

使用bindonce模块.您需要包含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>