javascript - 没有数据绑定(bind)的渲染值

Question

在 AngularJS 中，如何在没有双向数据绑定(bind)的情况下呈现一个值？人们可能出于性能原因想要这样做，或者甚至在给定的时间点呈现一个值。

以下示例均使用数据绑定(bind):

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

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

如何渲染 value 没有任何数据绑定(bind)？

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);
        }
    }
});

你可以像这样绑定(bind)一次

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

你可以正常绑定(bind)

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

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

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

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')