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.
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"/>
