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