AngularJS1.X Study Notes 2-Data Binding details, angularjs Study Notes

AngularJS1.X Study Notes 2-Data Binding details, angularjs Study Notes

In the previous article, Angular was recognized as a whole, and Angular features have been further learned from now on. This course is about data binding. All MVC frameworks use data binding, such as ThinkPHP and struts. Only data binding can separate the model layer from the view layer and implement MVC. Angular supports two-way data binding.

1. ng-bind

<! DOCTYPE html> 
Ng-bind implements a simple one-way binding.
2 ,{{}}
Similar to ng-bind, it is usually used.
<! DOCTYPE html> 
The disadvantage of this binding is that something similar to {data} may occur during loading.

The solution is to use ng-bind or ng-cloak. ng-cloak should be used only when data is bound. Otherwise, the processing will be blank.
<! DOCTYPE html> 
I tested ng-cloak, but I don't know why it doesn't work. Please let me know if someone knows it.
3. ng-bind-html
This command can process data in html mode. It does not parse html code into an object. The following compares ng-bind and ng-bind-html.
<! DOCTYPE html> 

<! DOCTYPE html> 
An error occurred while changing to ng-bind-html.

This is because Angular does not trust html by default, so we need to do so.
<! DOCTYPE html> 
In this way, you can.

4. ng-bind-template
Ng-bind only accepts a single data binding expression, while ng-bind-template is more flexible.
<! DOCTYPE html> 
5. ng-non-bindable
Sometimes we use {}, but we do not want to bind data. An error occurs when using it directly.
<! DOCTYPE html> 
6. Two-Way Data Binding ng-model
Bidirectional data binding allows elements to collect data from users to change the state of a program.
<! DOCTYPE html> 

You will find that the content of the text box is synchronized with the content in h1.
7. Summary
The commands related to data binding are as follows:
　　
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.