Display value without data binding

Question

In AngularJS, how can I visualize a value without two-way data binding? You might want to do this for performance reasons or even when determining a value at a particular point in time.

The following examples use data binding:

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

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

How to make value without data binding ?

Answer 1

Angular 1.3 +

In 1.3, Angular supports this using the following syntax.

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

As mentioned in this answer .

---

Angular 1.2 and below

It is simple and does not require a plugin. Check this.

This little 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 knit once, like this

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

You can be attached as usual

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

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

Some of you may use Angular batarang, and as mentioned in the comments, if you use this directive, the element still displays as a binding, when it is not, I am sure this has something to do with classes that are attached to element, try this, it should work (not verified). Let me know in the comments if this works 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 an OCD and want to remove the empty class attribute, do this

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

Answer 2

It looks like Angular 1.3 (starting with beta 10) has a one-time binding:

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

One-time binding

An expression starting with :: is considered a one-time expression. Disposable expressions will stop recounting as soon as they are stable, which occurs after the first digest, if the result of the expression is not undefined (see the value stabilization algorithm below).

Answer 3

Use the bindonce module . You will need to include the JS file and add it depending on your application module:

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

This library allows you to display elements that are bound only once - at their first initialization. Any additional updates to these values ​​will be ignored. This is a great way to reduce the number of hours on a page for things that will not change after they are rendered.

Usage example:

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

When used in this way, the property under value will be set after its availability, but then the clock will be disabled.

Answer 4

Comparison of @OverZealous and @Connor answers:

With traditional ngRepeat angular: 15 seconds for 2000 lines and 420 mA of RAM ( Plunker )

With ngRepeat and @OverZealous module: 7s for 2000 lines and 240mo RAM ( Plunker )

With ngRepeat and @Connor directive: 8s for 2000 lines and 500mo of RAM ( Plunker )

I conducted tests with Google Chrome 32.

Answer 5

Alternatively there is angular-once package:

If you are using AngularJS, have performance issues and you need to display readonly data lots, this project is for you!

angular-once was really inspired by bindonce and provides similar once-* attributes:

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