Home > Article > Web Front-end > Data binding for angularjs
This article mainly introduces the data binding of angularjs, which has certain reference value. Now I share it with everyone. Friends in need can refer to
There are three data binding methods in angularjs1.X for data synchronization and display. Before angularjs 1.3
, angularjs
only existed in two ways: two-way-binding
and one-way-bindng
, and then A binding mechanism called one-time-binding
was introduced.
Currently there are the following three data binding methods in angularjs
:
two-way-binding
one-way-binding
one-time-binding
Two-way-binding in #angularjs
is to associate Model
and View
. Data changes on either side will update the other side data. A common scenario is the input area on the page. Two-way binding can easily associate the value of the input control to the
. <input type="text" id="text" ng-model="name"/>
Through
we can easily combine the value of the input box (view
) and name
(Model
) related. Under the action of two-way data flow, whether we modify the value of the input box or modify name
, the other side will be updated to the new data in time.
is a built-in directive of angularjs
to implement two-way binding. ng-model
In different life cycles, there are different logical processes.
input command will The
input tag is merged and processed to register the
keydown event (DOM Event);
$watch is used to subscribe to the
change event (angularjs Event).
keydown event and calls
$apply to request the update action.
Model
Model occurs and
change is notified
interpolation , requesting an update to
DOM.
one-way- The data flow direction of binding is one-way, that is, it will only flow from
model to
view, but not from
view to
model . Therefore,
one-way-binding is used to display data, not to obtain input.
In
angularjs
one-way-binding has two syntaxes:
ng-bind and
{{expression} }.
<span ng-bind="name"> </span> <span>{{name}}</span>
For
one-way-binding, the internal mechanism is partially the same as two-way-binding.
$watch to subscribe
change Event (angularjs Event).
.
detects data changes, notifies interpolation
, and requests to update DOM
.
Finally the browser re-renders the text.
implemented a function called one -time-binding
mechanism. In essence, its mechanism is not much different from the other two methods, but it behaves differently when updating data. one-time-binding
will also register
to monitor data changes, but it will detect data non-Undefined## for the first time # Cancel monitoring when necessary.
<span>{{::name}}</span>
对于上面的代码,假设 name
从 undefined
-> angularjs
-> angular
,最终渲染的结果是 angularjs
,而不是 angular
。 这就是 one-time-binding
的特殊之处,当 name
从 undefined
变化为 angularjs
之后,被认定为 name
的状态已经是 stable
,因此将取消 $watch
, 即不再监听数据变化。
那么,假设 name
从 ''
-> angularjs
-> angular
, 则渲染结果是 ''
,即空字符串(第一次的值)。因为 one-time-binding
在计算 stable
时候使用的 严格相等,即 newVal === undefined
, 如果是,则继续保留 $watch
等待下一次的比较;否则,状态变更为 stable
,取消 $watch
, 数据转化为最终态。
在我看来,angularjs
核心在于 angularjs context
和 $digest
。
angularjs context
保证 angularjs
可以捕获到各种事件,用户输入、鼠标事件、键盘事件、甚至 $settimeout
和 $http
等异步行为的状态流转。
而 $digest
则保证 angularjs
可以确认是否要更新数据。
文中难免存在一些错误,欢迎大家斧正。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
addEventListener中的EventListener的接口对象
The above is the detailed content of Data binding for angularjs. For more information, please follow other related articles on the PHP Chinese website!