top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How many types of data binding in AngularJS?

+1 vote
322 views

Data binding is a very powerful feature of the software development technologies. Data binding is the connection bridge between view and business logic (view model) of the application. Data binding in AngularJs is the automatic synchronization between the model and view. When the model changes, the view is automatically updated and vice versa. AngularJs support one-way binding as well as two-way binding.

One-Way and Two-Way Data Binding
Figure 1: One-Way and Two-Way Data Binding

Binding Directives in AngularJs

  • ng-bind
  • ng-bind-html
  • ng-bind-template
  • ng-non-bindable
  • ng-model

ng-bind

This directive updates the text content of the specified HTML element with the value of the given expression and the text content is changing on expression changes. It is very similar to double curly markup ( {{expression }}) but less verbose.

Syntax

<ANY ELEMENT ng-bind="expression"> </ANY ELEMENT>   

Ng-bind-html

It (whatever it is) evaluates the expression and inserts the HTML content into the element in a secure way. It uses the $sanitize service, so to use this functionality, be sure that $sanitize is available.

Syntax

<ANY ELEMENT ng-bind-html=" expression "> </ANY ELEMENT>   

ng-bind-template

It (whatever it is) replaces the element text content with the interpolation of the template. It can contain multiple double curly markups.

Syntax

<ANY ELEMENT ng-bind-template=" {{expression1}} {{expression2}} … {{expressionn}} "> </ANY ELEMENT>   

ng-non-bindable 

This (whatever "this" is) directive informs AngularJs to not compile or bind the contents of the current DOM element This element is useful when we want to display the expression but it should not be executed by AngularJs.

Syntax

<ANY ELEMENT ng-non-bindable > </ANY ELEMENT> 

ng-model

This (whatever "this" is) directive can be bound with input, select, text area or any custom form control. It provides two-way binding. It also provides validation behavior. It also keeps the state of the control (valid/invalid, dirty/pristine, touched/untouched and so on).

Syntax

<input ng-bind="expression"/> 

posted Sep 28, 2017 by Shivaranjini

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button

...