在没有数据绑定的情况下呈现值 [英] Render value without data-binding

问题描述

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

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

{{value}}

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

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

解决方案

Angular 1.3+

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

{{::message}}

如此答案中所述.

<小时>

Angular 1.2 及以下

这很简单，不需要插件.看看这个.

这个小指令很容易完成你想要实现的目标

app.directive('bindOnce', function() {返回 {范围:真实，链接:函数($scope){设置超时(函数(){$scope.$destroy();}, 0);}}});

可以这样绑定一次

我绑定一次 - {{message}}

你可以像平常一样绑定

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

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

app.directive('bindOnce', function() {返回 {范围:真实，链接:函数($scope，$element){设置超时(函数(){$scope.$destroy();$element.removeClass('ng-binding ng-scope');}, 0);}}});

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

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

In AngularJS, how can I render a value without 2-way data binding? One may want to do this for performance reasons, or even rendering a value at a given point in time.

The following examples both use data binding:

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

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

How do I render value without any data binding?

解决方案

Angular 1.3+

In 1.3, Angular has supported this using the following syntax.

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

As mentioned in this answer.

---

Angular 1.2 and below

This is simple and doesn't need a plugin. Check this out.

This small directive will easily accomplish what you are trying to achieve

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

You can bind once like this

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

You can bind like normal

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

Demo: http://jsfiddle.net/fffnb/

Some of you may be using angular batarang, and as mentioned in the comments if you use this directive the element still shows as binding when it is not, I am pretty sure this has something to do with the classes that are attached to the element so try this, it should work (not tested). Let me know in the comments if it worked for you.

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

@x0b: If you have OCD and you want to remove the empty class attribute do this

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

这篇关于在没有数据绑定的情况下呈现值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！