what is the difference between ng-bind vs one time binding in angular

Question

What is the difference between \"ng-bind\" and \"one time binding\" in angular js.

If there is any difference, where should I be using each of them?

Answer 1

Two-way data binding

Two-way data binding in AngularJS means binding data from Model to View and vice versa (Data flows from the Scope/Controller to the View and from the View to the scope/controller). 'ng-model' is an angular directive used for achieving two-way data binding. Any modifications to that model from the Scope/Controller will be automatically propagated to the view regardless of whether the view is asking for the updated data and any modifications to that model from the View will be immediately reflected back to the Scope/Controller.

One-way data binding

One-way data binding in AngularJS means binding data from Model to View (Data flows from the scope/controller to the view). 'ng-bind' is an angular directive used for achieving one-way data binding. After the binding, any modifications to that model from the scope/controller will be automatically propagated to the view regardless of whether the view is asking for the updated data. No propagation happens for any change to the model from the view to the controller.

One-time data binding

As its name suggests, the binding happens only once, ie, in the first digest cycle. One-time binding allows for a model or view to be updated ONCE from the value set by the controller upon the first digest cycle. As of AngularJS 1.3, you can use the "::" token to create one-time data bindings. These are bindings that deregister their own $watch() functions once the value has stabilized (which basically means the value is defined).

One-time binding is used for values that won't change after the page is stable. "Stable" generally means that the expression has been assigned a value. Once the value is set, changes to the value in the controller won't change the displayed value until the page is reloaded. The syntax is {{::expression}}.

So, for those values or lists that won't change after the page is stable, always try to use one-time binding. This will reduce the number of unnecessary watchers in our application.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="customer in ::customers" >
    {{::customer.name}}
    ({{customer.address}})
      <button ng-click="change(customer)">Change</button>
     </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.customers = [{
        name: 'Gloria Jane',
        address: 'Silo Park, 9300 East Orchard Road,    Greenwood Village, CO, 80114'},{
        name: 'Nicholas Michael',
        address: 'Village Park,  East Lake Avenue, Aurora, CO, 80016'
    }];
  
    $scope.change = function(customer) {
        customer.address = 'Cherry Creek State Park, 4201 S Parker Rd, Aurora, CO 80014, USA';
        customer.name ='Tessy Thomas';
    };
});
</script>

Answer 2

"ng-bind" is simply the html attribute version of AngularJS's regular {{expression}} syntax.

So, <div ng-bind="productName"></div> is equivalent to <div>{{productName}}</div>.

One-time binding is used for values that won't change after the page is stable. "Stable" generally means that the expression has been assigned a value. Once the value is set, changes to the value in the controller won't change the displayed value until the page is reloaded.

The syntax is {{::expression}}. Following the above example, the syntax is

<div>{{::productName}}</div>

A complete explanation of the algorithm used to determine if a page is stable can be found here:

https://docs.angularjs.org/guide/expression

Answer 3

These are not mutually exclusive concepts. You can one-time bind with ng-bind as well:

<div ng-bind="::productName"></div>

Answer 4

In simple way,i understood like this,

Two way Data-binding - ng-model

Links both the {{}}(in the HTML) and $scope (in the controller) of the variable and updates the value of the variable if any of the changes happen.

One way Data-binding - ng-bind

Links only from $scope to the {{}}, but not vice versa.

Answer 5

Two-Way Data-Binding

Two-way data binding provides the ability to effortlessly take the value of a property on your scope and display it on your view while also having a text input update it without any crazy logic

One-Time Data-Binding

First, I want to be sure to point out this is NOT one-way data-binding. Such a thing does not really exist as a convention provided by Angular. One-time binding allows for a model or view to be updated ONCE from the value set by the controller upon the first digest cycle.